以下例子全是基于chrome游览器
absolute是绝对定位,基于第一个非static的父元素进行定位
relative是相对定位,基于其正常位置进行定位
1.relative定位的元素,top与margin-top的区别
- 相对定位元素使用top,right,bottom,left进行定位时,视觉效果中元素位置虽然已经改变,但是不会影响其原有的位置,其它元素还是基于其原来的位置进行定位,直接上例子
<style type="text/css">
.s1{
position:relative;
width: 100px;
height: 100px;
top: 100px;
background: red;
}
.s2{
width: 200px;
height: 200px;
background: yellow;
}
</style>
<body>
<div class='s1'>
</div>
<div class="s2">
</div>
</body>
效果图
可以看到,使用top的时候,紫块(相对元素)在视觉上位置虽然改变了,但是其原有的位置是没有变化的,所以其黄色块的位置是跟在其原有的位置。
2.相对元素使用margin进行定位,则视觉位置与原有位置是相同的,以下是例子
<style type="text/css">
.s1{
position:relative;
width: 100px;
height: 100px;
margin-top: 100px;
background: red;
}
.s2{
width: 200px;
height: 200px;
background: yellow;
}
</style>
<body>
<div class='s1'>
</div>
<div class="s2">
</div>
</body>
使用margin-top时,原有位置与试图位置相同,则直接在其后面显示。
2.相对布局中,第一个子元素使用margin-top
<style type="text/css">
html{
background: white;
}
body{
position: relative;
background: wheat;
}
.s1{
width: 100px;
height: 100px;
margin-top: 100px;
background: red;
}
.s2{
width: 200px;
height: 200px;
background: yellow;
position: absolute;
}
</style>
<body>
<div class='s1'>
</div>
<div class="s2">
</div>
</body>
上图可知,body与static元素却在同一行位置,absolute元素跟在其后面。当时去找了相关margin的相关介绍,如下
1.所有毗邻的两个或更多盒元素的margin将会合并为一个margin进行共享。(毗邻的元素:同级或嵌套的盒元素,它们之间没有非空、border或padding分隔)
body中的第一个子元素有一个margin-top为100px,满足上述条件,所以margin会进行共享,margin的共享机制是1.同为正选取最大的。2.同为负选取绝对值最大的。3.一正一负则相加。因此body与第一个子元素共享margin-top为100px,所以在同一位置,距离顶部100px。
2.absolute元素在static后面的原因,查看资料如下:
如果子元素设置成了定位元素,但是没有设置top,left等值,那么就相当于定位仅仅是从标准流脱标了,对于margin与padding对其得位置影响,可以理解为,其实子元素没有脱标。
大概就是设置了定位元素,还在其原来的位置,可以设置margin值,margin值是基于原来位置进行定位的,但是已经脱离了文档流,只有设置了top等值,才算真正意义上得脱离文档流,根据祖先的第一个非static元素进行定位。如果不设置top等值的位置信息,绝对定位的元素不计算到父元素的内容里面,是脱离了父元素的内容,但是位置关系还存在(因为没有设置位置信息)。
以下是个例子。
<body>
<div class="s1">s1</div>
<div class="s2">s2</div>
<div class="s3">s3</div>
</body>
body{
position:relative;
}
.s1 {
height: 200px;
background-color: yellow;
/* margin-left: 200px; */
}
.s2 {
width: 200px;
height: 200px;
background-color: red;
margin-top:50px;
position: absolute;
}
.s3{
height: 200px;
background-color: blue;
}
效果图如下
还有个问题是,如果第一个子元素设置成Inline-block与inline,进行测试 inline-block
这个是因为第一个元素变了BFC,不会与父元素发生margin重叠。
inline
内联元素没办法设置width与height
3.如果body父元素设置了overflow:hidden
IE上面
Chrome上面
注意ie与chromed的区别
4.如果父元素为div时,overflow:hidden的影响
div不加overflow:hidden
div加overflow:hidden,第二个子元素为absolute
因为absolute元素没有设置top等值,absolute元素不计算到父元素的内容里面,但是位置信息还是原本的位置信息,所以会被隐藏。
注意一下,此时的margin并没有合并,这是因为父元素使用了overflow:hidden,会变成BFC(块级格式上下文),此时内部的block元素的垂直方向距离由margin决定,父元素并不会与子元素的margin进行合并。
第二个子元素为relative
relative元素不设置top等值,还在内容里面。
IE与chrome一致,当父元素div设置了overflow:hidden时,margin的满足条件将不会满足,所以会出现上述情况。
5.父元素设置定高与overflow:hidden,子绝对定位元素设置top
父元素为body元素
<style type="text/css">
html{
background: white;
}
body{
position: relative;
background: wheat;
overflow: hidden;
height: 200px;
}
.s1{
width: 100px;
height: 100px;
margin-top: 100px;
background: red;
}
.s2{
width: 200px;
height: 200px;
top: 100px;
background: yellow;
position: absolute;
}
</style>
<body>
<div class='s1'>
</div>
<div class="s2">
</div>
</body>
当父元素为div时
<style type="text/css">
html{
background: white;
}
/* body{
position: relative;
background: wheat;
overflow: hidden;
height: 200px;
} */
.s3{
position: relative;
overflow: hidden;
height: 200px;
background: wheat;
}
.s1{
width: 100px;
height: 100px;
margin-top: 100px;
background: red;
}
.s2{
width: 200px;
height: 200px;
top: 100px;
background: yellow;
position: absolute;
}
</style>
<body>
<div class="s3">
<div class='s1'>
</div>
<div class="s2">
</div>
</div>
</body>
结果图
当父元素为body时,overflow:hidden是不起效果,但是父元素为div时,设置overflow:hidden后,如果相对布局的元素在父元素之外,会隐藏。
如果以上有错误,欢迎大佬指导或补充。