CSS中的绝对定位(absolute)和z-index的用法

最新推荐文章于 2024-08-27 13:31:19 发布

蓝色的小叶子

最新推荐文章于 2024-08-27 13:31:19 发布

阅读量6.9k

点赞数 1

分类专栏： css(3)

本文链接：https://blog.csdn.net/bluedreamerr/article/details/95472383

版权

css(3) 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

先把代码贴出来

<!DOCTYPE html>
<html lang="en">
<head>
<title>absolute</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta charset="utf-8" />
   <style>
   div#grandfather{
           position:relative;
           width:100%;
           height:300px;
           border:1px solid #ccd;
           background:#ccd;
           }
   div#father{
           position:absolute;
           width:200px;
           height:200px;
           border:1px solid red;
           background:white;
           }
   div#son1{
           width:60px;
           height:60px;
           border:1px solid green;
           background:green;
           position:absolute;
           top:60px;
           left:20px;
           z-index:222;
           }
   div#son2{
           width:60px;
           height:60px;
           border:1px solid yellow;
           background:yellow;
           position:absolute;
           top:30px;
           left:30px;
           z-index:33;
           }

   </style>
   </head>
<body>
<div id="grandfather">
爷爷元素
   <div id="father">
   父元素
   <div id="son1">
   儿元素1
   </div>
   <div id="son2">
   儿元素2
   </div>
   </div>
</div>
</body>

</html>

效果如下

解释：

css中有四种定位：默认，绝对（absolute），相对（relative），固定（fixed）

我们这里讨论的是绝对定位（absolute），绝对定位是一种脱离文档流的定位，被设置为绝对定位的元素，会找一个参照，先找父元素，查看父元素是否被设置为绝对或相对定位，有的话，视其为参照，如果没有，则继续往上找，直到html元素，以窗口作为参照，注意：被设为绝对定位的元素，可以不用管元素是否是块元素，可以直接设置宽高。

我们定义了四个div：

一个最外层的爷爷元素（先这样叫0.0），设置为position:relative;一个父元素，设置为 position:absolute;，并给这个父元素两个子元素分别设置样式为：

position:absolute; top:60px; left:20px; z-index:222;background:green;/*子元素1*/

position:absolute; top:30px; left:30px;z-index:33;background:yellow;/*子元素2*/

设置了绝对定位，一般都要再指定top，bottom，left，rigth这几个值其中的一些，

上面的父元素设置了absolute，但是没有指定top，bottom，left，rigth，其中的一些，所以它默认是left:0,top:0;

上面的子元素1设定了top:60px; left:20px;所以它的位置相对于父元素向上有60px，向左有20px;

上面的子元素2设定了top:30px; left:30px;所以它的位置相对于父元素向上有30px，向左有30px;

所以最终效果是这样：