css定位流测试实验效果与代码分析

最新推荐文章于 2022-10-15 09:28:39 发布

BugMeOut

最新推荐文章于 2022-10-15 09:28:39 发布

阅读量1.2k

点赞数

分类专栏： css 文章标签： css 文档流定位

本文链接：https://blog.csdn.net/bugmeout/article/details/21395605

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.html

<div id="div1">div1</div>

<div id="div2-father">div2-father
<div id ="div2">div2</div>
<div id ="div3">div3</div>
</div>
<a href="">www.baidu.com</a>
<a href="">www.baidu.com</a>
<div id="div4">div4</div>

2.css

#div1{
border:1px solid;
width:100px;
height:100px;
background-color:#FF4400;
}
#div2-father{
background-color:#9DD6C5;
border:1px solid;
width:300px;
height:300px;
overflow:hidden;
position:relative;
}
#div2{
border:1px solid;
width:100px;
height:100px;
background-color:#E1E8E5;
position:absolute;
left:100px;

}
#div3{
border:1px solid;
width:100px;
height:100px;
background-color:#5091C9;
}
#div4{
border:1px solid;
width:100px;
height:100px;
background-color:#FAE8DA;
}

a{
border:1px solid;
display:block;
height:100px;
width:100px;
text-decoration:none;
line-height:100px;
overflow:hidden;
}

执行效果：