css层模型初理解

来源：互联网发布：迈克尔芬利数据编辑：程序博客网时间：2024/05/30 07:12

css中通过设置position属性来实现的定位机制，position属性拥有3种定位机制，分别是静态定位，相对定位和绝对定位，并且可以设置4种属性值，分别是static（静态定位），relative（相对定位），absolute（绝对定位）和fixed（固定定位）。absolute和fixed同属于定位机制中的绝对定位（这个不用纠结啊）。

Static属性：无特殊定位，依然处于标准文档流中top，right，bottom，left等属性不会被应用。

relative：属性：设置了相对定位的元素，会以自身初始位置为参照物进行偏移，并且仍然处于标准文档流中，占据标准文档流的空间。同时拥有了z-index属性，也就是空间的z轴层堆叠效果。

如以下代码：

<styletype="text/css">

.box1{height:200px;background:#28EDB9; position:relative; }

.box2{height:200px;background:#F921F8;}

</style>

</head>

<body>

<divclass="box1">box1</div>

<divclass="box2">box2</div>

</body>

当元素设置relative属性时，没有设置偏移量的话，依然处于原位置。那么现在给box1设置偏移量：

<styletype="text/css">

.box1{height:200px;background:#28EDB9; position:relative; top:50px; left:50px;}

.box2{height:200px;background:#F921F8;}

</style>

</head>

<body>

<divclass="box1">box1</div>

<divclass="box2">box2</div>

</body>

absolute属性：设置了absolute属性的元素，会建立以祖先元素为参照的定位，并且完全脱离标准文档流，同样用有z-index属性。如果元素没有设置偏移量的时候，它就会处于初始位置并且宽度随着内容的宽度而增加，并且脱离标准文档流。如以下代码：

<styletype="text/css">

.box1{height:200px;background:#28EDB9; position:absolute;}

.box2{height:400px;background:#F921F8;}

</style>

</head>

<body>

<divclass="box1">box1</div>

<divclass="box2">box2</div>

</body>

如果设置了偏移量，则需要考虑到参照基准的问题了。这又分为两种情况，第一种是没有已经定位的祖先元素（也就是设置了以postion非static方式定位，常用relative属性的包裹层），那么元素就以html标签进行偏移：

<styletype="text/css">

.wrap{height:100px;background:#E0FB1C;}

.box1{height:200px;background:#28EDB9; position:absolute;top:50px; left:50px;}

.box2{height:400px;background:#F921F8;}

</style>

</head>

<body>

<divclass="wrap">

<divclass="box1">box1</div>

</div>

<divclass="box2">box2</div>

</body>

在这段代码中，wrap没有设置以postion非static方式定位，所以元素相对于html标签定位。

如果给wrap设置absolute定位，也就是以postion非static方式定位，会发现它相对于wrap偏移了，为了更清楚演示我设置了margin属性，并且设置了relative（同样的absolute也可以）：

<styletype="text/css">

.wrap{height:100px;background:#E0FB1C; position:relative; margin-top:50px;}

.box1{height:200px;background:#28EDB9; position:absolute;top:50px; left:50px;}

.box2{height:400px;background:#F921F8;}

</style>

</head>

<body>

<divclass="wrap">

<divclass="box1">box1</div>

</div>

<divclass="box2">box2</div>

</body>

如果把relative属性去掉，你们会发现很奇妙哦。

如果有多个祖先元素设置了以postion非static方式定位怎么办呢，那么这样他就以距离最近的祖先元素进行参照。

0 0