css:position以及z-index属性

最新推荐文章于 2024-07-07 17:22:42 发布

diligentkong

最新推荐文章于 2024-07-07 17:22:42 发布

阅读量4.8k

点赞数 6

分类专栏： css小基础文章标签： css

本文链接：https://blog.csdn.net/diligentkong/article/details/54692744

版权

css小基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

css定位语法
position : static | absolute | fixed | relative
说明：
从上面语法可以看出，定位分为静态（static），绝对定位（absolute），固定(fixed)，相对定位（relative）。其中最常用也是最实用的两个定位方法：绝对定位（absolute）、相对定位（relative），我会重点介绍一下。

1.position：static；

在CSS中所有元素的“position”属性的默认值都是“static”，故不需要显式的为每个元素设置“position:static”。

2.position：relative;

相对定位，就是微调元素位置的。让元素相对自己原来的位置，进行位置调整。
如果给某个元素指定了postion的值为“relative”，那么可以通过top,right,bottom,left来设置元素的定位值。
看个小例子：


            .box2{
                background-color: green;
                position: relative;
                left: 100px;
                top: 50px;

            }
            .box3{
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </body>

显示结果为：
这里写图片描述
通过以上可以总结为一下几点：
（1）元素设置了relative时，是相对于元素本身位置进行定位；
（2）元素设置了relative后，可以通过“top,right,bottom,left”改变元素当前所在的位置，但元素移位后，同样点有当初的物理空间位；
（3）元素设置了relative后，如果没有进行任何的“top,right,bottom,left”设置，元素不会进行任何位置改变。
（4）top的值表示对象相对原位置向下偏移的距离，bottom的值表示对象相对原位置向上偏移的距离，两者同时存在时，只有top起作用。
　　left的值表示对象相对原位置向右偏移的距离，right的值表示对象相对原位置向左偏移的距离，两者同时存在时，只有left起作用。
　　这里写图片描述
　上面几点都是比较好理解，那么现在针对第二点，我重点说明一下：
相对定位不脱离标准流，真实的位置在老家，只不过是影子出去了，可以到处飘。（这个飘是利用top,right,bottom,left进行控制的），有图有真相
这里写图片描述
相对定位的用途：
相对定位是有坑的，就是在老家占有位置，所以一般不用做“压盖”的效果。其作用一般是：
（1）微调元素
（2）做绝对定位的参考，子絶父相（说完 “绝对定位”之后，再详细介绍）
相对定位的定位值：
用left、right描述盒子右、左的移动
用top、bottom描述盒子的下、上的移动

position:relative;
top:10px;
left:40px;   表示向右下方移动

position:relative;
top:20px;
right:40px;  → (向左移动40px)     表示向左下方移动

position: relative;
top: -200px;       → 负数就是相反的方向，如果是正，就是下边，如果是负数就是上边
right: -200px;

position: relative;
right: -300px;
bottom: 300px;
//完全等价于：
position: relative;
left: 300px;
bottom: 300px;

3.position:absolute;

绝对定位的盒子是脱离标准文档流的。如果你给元素指定了absolute，整个元素就会漂出文档流，所有的标准文档流的性质，绝对定位之后就不遵守了；而且元素自身的物理空间也同时消失了，不像“relative”还具有原先的物理空间。
这里写图片描述
绝对定位之后，标签就不区分所谓的行内元素、块级元素了，行内元素不需要设置display:block;就可以设置宽、高了；我们演示个例子看看：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }

            span{
                background-color: gold;
                position: absolute;
                top: 100px;
                left: 100px;
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <span></span>
    </body>
</html>

这里写图片描述
绝对定位的参考点：
(1)绝对定位的参考点如果用top描述，那么定位参考点就是页面的左上角，而不是浏览器的左上角；

(2)绝对定位的参考点如果用bottom描述，那么定位参考点就是浏览器首屏窗口尺寸，对应的页面左下角。
这里写图片描述
这个比较难理解，来道题看看吧。

你会了吗？？？

(3)以盒子为参考点
一个绝对定位的元素，如果父辈元素中也出现了定位的元素，那么将以父辈这个元素，为参考点。
注意：以盒子为参考点时，要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷，也可能是曾祖父。总之，要听最近的已经定位的祖先元素的。
这里写图片描述
这是以父亲作为参考点

这是以父辈元素作为参考点
还要注意的是：
绝对定位的参考点不一定是相对定位，任何定位，都可以作为参考点
来个例子看看

这是以父亲绝对定位作为参考点的
需明白：

子绝父绝、子绝父相、子绝父固，都是可以给儿子定位的。但是，工程上子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。工程上，“子绝父相”有意义，父亲没有脱标，儿子脱标在父亲的范围里面移动。
同时还要知道：
绝对定位的儿子，无视参考的那个盒子的padding。
这里写图片描述
绝对定位的小用处：让盒子居中
绝对定位之后，所有标准流的规则，都不适用了。所以margin:0 auto;失效。
来个例子看看绝对定位如何让盒子进行居中的

其实非常简单，就是left:50%; margin-left:负的宽度的一半。

4.position:fixed;

固定定位，就是相对于浏览器窗口定位。页面如何滚动，这个盒子显示的位置不变。元素框的表现类似于将 position 设置为 absolute。固定定位脱标！IE6不兼容
这个简单自己去验证一下吧
固定定位的小用途：返回顶部按钮和顶部导航条
讲完定位不得不提一下z-index了。

z-index，

又称为对象的层叠顺序，它用一个整数来定义堆叠的层次。
看个例子：
正常情况下：
这里写图片描述
但是你看我给他们分别加一个z-index值

你会发现绿色盒子压盖住了蓝色盒子
总结几点：
1.z-index值表示谁压着谁。数值大的压盖住数值小的。
2.只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。
使用static 定位或无position定位的元素以及浮动的元素z-index属性是无效的。
3.z-index值没有单位，就是一个正整数，如z-index:980;默认的z-index值是0；
4.如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁就在上面压住别人。定位的元素，永远能够压住没有定位的元素。
5.z-index的盒子有从父现象。如果父亲的盒子比不上其他人的z-index值，那么儿子的z-index值再大也没用。
这个从父现象我用个例子说明一下：
这里写图片描述
嗯！说的差不多了，作为学习笔记用。如有不对的地方也烦请各位给指出一下，这个寒假我会继续整理以前学的知识的！

diligentkong

关注

6
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
css:position以及z-index属性

css定位语法 position : static | absolute | fixed | relative 说明：从上面语法可以看出，定位分为静态（static），绝对定位（absolute），固定(fixed)，相对定位（relative）。其中最常用也是最实用的两个定位方法：绝对定位（absolute）、相对定位（relative），我会重点介绍一下。1.position：stat
复制链接

扫一扫

专栏目录