首页 > 其他 > 详细

position(absolute)

时间:2020-01-10 20:48:54      阅读:59      评论:0      收藏:0      [点我收藏+]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position_absolute</title>
<style>

.div1{
background-color: #2eb1fc;
width:100px;
height:100px;
}
.div2{
background-color:#1ecc86;
width:100px;
height:100px;
position:absolute;
/*absolute会向上寻找他的父级(直到position的值不为None),如果找不到则会一直向上找*/
/*此处div2出现这种情况,是因为他的父级class=‘box_2‘的position为None,所以它的位置相对外部的html移动,所以图形才会变成这样*/
/*解决方法:*/
/*给父级position加上非空属性值*/
/*if the element has ‘position:absolute‘,the containing block is established by the nearest ancester*/
/*with a‘position‘ of ‘absolute‘ ,‘ralative‘ or ‘fixed‘.*/

left:100px;
top:100px;
}
.div3{
background-color:#71a403;
width:200px;
height:200px;
}
.box_2{
position:relative;
border:3px solid rebeccapurple;
}
</style>
</head>
<body>
<div class="div1">111</div>
<div class="box_2">
<div class="div2">222</div>
</div>
<div class="div3">333</div>
</body>
</html>

position(absolute)

原文:https://www.cnblogs.com/startl/p/12177932.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!