您的位置：首页 > Web前端 > CSS

CSS学习笔记之文档流

2016-09-08 17:16 288 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<style type="text/css">
#div1
{
background-color:Green;
width:300px;        /* 设置div的宽和高 */
height:300px;
top:100px;          /* 设置div距离页面上边和左边的距离 */
left:100px;
position:absolute;  /* 设置div显示的绝对定位，定位到哪就在哪显示（打破文档流的限制） */
z-index:3;          /* 设置显示的层面：数值大的显示在外层，数值小的显示在底层 */
}
#div2
{
background-color:Red;
width:300px;
height:300px;
top:130px;
left:130px;
position:absolute;
z-index:2;
}
#div3
{
background-color:Blue;
width:300px;
height:300px;
top:160px;
left:160px;
position:absolute;
z-index:1;
}
</style>
</head>
<body>

<!-- 页面上元素的排列默认都是按照文档流来排列的，即从上到下、从左到右依次排列，不会重合。-->

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>

页面效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航