大灰牛博客,程序SEO建站学习笔记

您的位置：主页 > HTML/CSS >

定位之绝对定位

作者：admin•更新时间：2021-04-01 17:24•阅读

定位元素>元素层级>元素定位>滚动条

绝对定位- position: absolute;特点

脱离文档流
可以设置参照物,参照物必须是其父级元素(直系父级),如果直接父级没有会一直往上查找直到找到最外层的根元素为止
有宽度和高度的情况下,top和 bottom同时有值,top生效;left和 right同时有值,left生效;
没冇宽度和髙度的情况下,top和 bottom同时设置值的情况下,会将在这个盒子拉大,上下值都起作用,左右同理;
可以设置层级关系z-index属性

绝对定位的特点:

它可以设置top、 bottom、left、 right四个方位值
绝对定位元素会脱离文档流不占位导致后面的元素会往前跑占领它的位置
绝对定位元素一定要有相对参照物(它的直接父级),如果父级元素没有加相对参照物,它会一级一级往上查找,直到找到最外层的根元素htm1
如果方位里同时有1eft和 right最后听left;同时有top和 bottom最后听top 以后在实际项目中只需要设置top或者bottom 1eft或者 right
z-index越大层级越在上
一个元素定位在一个元素上或者两个元素的叠加的这种情况;我们都可以用定位(绝对定位);绝对定位一定要指名它定位的方向
相对参照物只要是定位元素就可以(绝对定位,相对定位,固定定位);优先选相对定位 position: relative;绝对定位和固定定位都会脱离文档流不占位

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.red{
position: fixed;
/* position: relative; */

width: 500px;
height: 500px;
background-color: red;

margin-top: 100px;
margin: 50px auto;
}
.blue{
position: absolute;
top: 50px;
bottom: 80px;
left: 50px;
right: 80px;
width: 300px;
height: 300px;
background-color: blue;

z-index: 10;
}
.green{
width: 200px;
height: 200px;
background-color: green;

position: relative;
z-index: 11;
}

.pic{
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;
}
.pic img{
display: block;
width: 100%;
height: 100%;
}
.pic .bg{
width: 200px;
height: 50px;
background-color: rgba(0,0,0,.5);
position: absolute;
bottom: 0;
left: 0;
}
.pic .txt{
position: absolute;
left: 0;
bottom: 0;
height: 50px;
line-height: 50px;
font-size: 14px;
color: #fff;
text-align: center;
width: 100%;
}
</style>
</head>
<body>
<div class="red">
<div class="blue"></div>
<div class="green"></div>
</div>

<div class="pic">
<img src="images/404.png" alt="">
<div class="bg"></div>
<div class="txt">1个元素定在另一个元素上面</div>
</div>

<div style="height: 1000px;"></div>
</body>
</html>

上一篇标题：定位之相对定位
下一篇标题：clear的值和特点及伪元素before和after的使用

大灰牛博客,程序SEO建站学习笔记

定位之绝对定位

绝对定位- position: absolute;特点

绝对定位的特点:

相关文章

推荐文章

热门文章