我在主页上使用“相对位置”和“绝对位置”。
我有一个使用上述母版页的页面,并且我尝试在此页面中再次对其他 2 个元素使用“相对位置”和“绝对位置”,但该页面中下面的元素(“绝对位置”)是不是根据其上方的元素放置的(“相对位置”),而是指母版页中元素的“相对位置”。
希望不是太笨拙的解释..
是否可以在同一个 HTML 页面上多次使用“相对位置”???如果是这样,怎么办??
html代码
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="basic.css">
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</body>
</html>
CSS 代码
身体{
边距:0 像素;
内边距:0px;
}
.one{
width: 200px;
height: 200px;
background: red;
position: relative;
}
.two{
width: 200px;
height: 200px;
background: green;
position: absolute;
top: 0px;
left: 200px;
}
.three{
width: 200px;
height: 200px;
background: blue;
position: relative;
}
.four{
width: 200px;
height: 200px;
background: black;
position: absolute;
top: 0px;
left: 200px;
}
代码笔链接 http://codepen.io/anon/pen/FtIHl
当一个人使用position: absolute
它是根据祖先计算的,而不是兄弟姐妹,所以你的.two
and .four
div 是相对于 body 定位的,而不是.one
and .two
,用这个代替:
<div class="one">
<div class="two"></div>
</div>
<div class="three">
<div class="four"></div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)