Code
- HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相对定位与绝对定位以及伪元素</title>
<link rel="stylesheet" href="main.css">
<script src="./main.js"></script>
</head>
<body>
<div class="img-container">
<img src="../asserts/images/pixiv 102215084 p2.png" alt="小兔娘">
</div>
</body>
</html>
- CSS
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
/* flex布局：使居中 */
display: flex;
align-content: center;
align-items: center;
justify-content: center;
}
.img-container {
width: 50vw;
height: 50vh;
/* 设置相对定位，表示绝对定位的 (0,0) 位置是相对于该元素的左上角；一般相对定位会配合绝对定位使用 */
position: relative;
}
img {
width: 100%;
height: 100%;
/* 图片填充img方式，等比缩小还是铺满 */
object-fit: fill;
}
.img-container::before {
/*
绝对定位的 (0, 0) 是相对于最近一个相对定位的父元素的左上角，
如果没有父元素采用相对定位，则相对于html标签
*/
content: '';
position: absolute;
/* 尺寸和位置一定要写 */
right: 5rem;
bottom: 5rem;
width: 48px;
height: 48px;
background-image: url("../asserts/images/like.svg");
background-size: contain;
}
- JAVASCRIPT
// 没有用到 js
Result
用到的图片：
Conclusion
- 设置相对定位，表示绝对定位的 (0,0) 位置是相对于该元素的左上角；一般相对定位会配合绝对定位使用
- 绝对定位的 (0, 0) 是相对于最近一个相对定位的父元素的左上角
- 如果没有父元素采用相对定位，则相对于html标签，元素会出现在浏览器窗口的指定位置
- 注意伪类和伪元素的区别
Reference
New Discovery
- svg标签可以直接在页面上展示，我从来都没有试过这么写
<svg t="1692856208711" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5360" width="48" height="48"><path d="M724.992 58.026667c-84.309333 0-162.474667 42.325333-214.016 111.957333C459.434667 100.352 380.928 58.026667 296.96 58.026667 145.066667 58.026667 21.504 193.194667 21.504 359.082667c0 98.986667 44.373333 168.277333 79.872 224.256C204.8 745.472 464.554667 947.2 475.477333 955.733333c10.581333 8.192 22.869333 12.288 35.498667 12.288 12.288 0 24.917333-4.096 35.157333-12.288 10.922667-8.533333 271.018667-210.261333 374.101333-372.394667 35.498667-55.978667 79.872-125.269333 79.872-224.256C1000.106667 193.194667 876.544 58.026667 724.992 58.026667L724.992 58.026667 724.992 58.026667 724.992 58.026667zM724.992 58.026667" fill="#d81e06" p-id="5361"></path></svg>