CSS 绝对定位
CSS About 1,905 wordsposition
绝对定位使用absolute
关键字,表示依赖于同级标签或父标签定位,元素本省脱离文档流不占据空间。
position: absolute;
定位
left
、right
、top
、bottom
来定位。
html
当绝对定位的标签有同级标签:
- 绝对定位的标签位于同级元素之下时,绝地定位的标签依赖于同级标签,处于同级标签之下(同级标签的下方)。
- 绝对定位的标签位于同级元素之上时,绝地定位的标签依赖于父级标签,处于父级标签的
(0,0)
点(左上角)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.placeholder {
background-color: #2b36a5;
width: 100%;
height: 100px;
}
.parent {
position: relative;
background-color: yellow;
width: 100%;
padding: 20px;
}
.brother {
background-color: red;
width: 100%;
height: 100px;
}
.component {
background-color: green;
width: 50px;
height: 50px;
position: absolute;
}
</style>
</head>
<body>
<div class="placeholder"></div>
<div class="parent">
<div class="brother"></div>
<div class="component"></div>
</div>
<hr>
<div class="placeholder"></div>
<div class="parent">
<div class="component"></div>
<div class="brother"></div>
</div>
</body>
</html>
示例
绿色标签为绝对定位标签,红色标签为同级标签,黄色标签为父级标签,蓝色标签为占位演示。
处于同级标签之下
处于父级标签(0,0)点
Views: 522 · Posted: 2024-02-10
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb/LiteNote扫描下方二维码关注公众号和小程序↓↓↓
Loading...