CSS属性之定位属性的示例分析

小编给大家分享一下CSS属性之定位属性的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

站在用户的角度思考问题，与客户深入沟通，找到莎车网站设计与莎车网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站设计、做网站、企业官网、英文网站、手机端网站、网站推广、域名与空间、雅安服务器托管、企业邮箱。业务覆盖莎车地区。

CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。

position: absolute;  
position: relative;  
position: fixed;

下面逐一介绍。

相对定位

相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。

我们之前学习的背景属性中，是通过如下格式：background-position:向右偏移量向下偏移量;

但这回的定位属性，是通过如下格式：

position: relative;
    left: 50px;
    top: 50px;

相对定位的举例：



 
  
  
  
  
  
  Document
    

        body{
            margin: 0px;
        }

        .div1{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }

        .div2{
            position: relative;/*相对定位：相对于自己原来的位置*/
            left: 50px;/*横坐标：正值表示向右偏移，负值表示向左偏移*/
            top: 50px;/*纵坐标：正值表示向下偏移，负值表示向上偏移*/

            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    
 
 
    有生之年

狭路相逢

效果：

CSS属性之定位属性的示例分析

相对定位不脱标

相对定位：不脱标，老家留坑， 别人不会把它的位置挤走。

也就是说，相对定位的真实位置还在老家，只不过影子出去了，可以到处飘。

相对定位的用途

相对定位有坑，所以如果需要做一般不用于做“压盖”效果（把一个div放到另一个div之上）。页面中，效果极小。就两个作用：

（1）微调元素

（2）做绝对定位的参考，子绝父相

相对定位的定位值

left：盒子右移

right：盒子左移

top：盒子下移

bottom：盒子上移

PS：负数表示相反的方向。

↘：

position: relative;
    left: 40px;
    top: 10px;

↙：

position: relative;
    right: 100px;
    top: 100px;

↖：

position: relative;
    right: 100px;
    bottom: 100px;

↗：

position: relative;
    left: 200px;
    bottom: 200px;

CSS属性之定位属性的示例分析

如果要描述上面这张图的方向，我们可以首先可以这样描述：

position: relative;
    left: 200px;
    top: 100px;

因为 left: 200px 等价于 right: -200px ，所以这张图其实有四种写法。

绝对定位

绝对定位：定义横纵坐标，原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。

格式举例如下：

position: absolute;  /*绝对定位*/
    left: 10px;  /*横坐标*/
    top/bottom: 20px;  /*纵坐标*/

绝对定位脱标

绝对定位的盒子脱离了标准文档流。

所以，所有的标准文档流的性质，绝对定位之后都不遵守了。

绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要 display:block 就可以设置宽、高了。

绝对定位的参考点（重要）

（1）如果用 top描述，那么参考点就是 页面的左上角，而不是浏览器的左上角：

CSS属性之定位属性的示例分析

（2）如果用 bottom描述，那么参考点就是 浏览器首屏窗口尺寸（好好理解“首屏”二字），对应的页面的左下角：

CSS属性之定位属性的示例分析

为了理解“ 首屏”二字的含义，我们来看一下动态图：

CSS属性之定位属性的示例分析

问题：

CSS属性之定位属性的示例分析

答案：

用bottom的定位的时候，参考的是浏览器首屏大小对应的页面左下角。

CSS属性之定位属性的示例分析

以盒子为参考点

一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。

如下：（子绝父相）

CSS属性之定位属性的示例分析

以下几点需要注意。

（1）要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷：

        相对定位
                没有定位
                           绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素

（2）不一定是相对定位，任何定位，都可以作为儿子的参考点：

子绝父绝、 子绝父相、子绝父固，都是可以给儿子定位的。但是在工程上，如果子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。

“ 子绝父相”有意义：这样可以保证父亲没有脱标，儿子脱标在父亲的范围里面移动。于是，工程上经常这样做：

父亲浮动，设置相对定位（零偏移），然后让儿子绝对定位一定的距离。

下图中，绿色部分是父亲div的padding，蓝色部分p是div的内容区域。此时，如果div相对定位，p绝对定位，那么，

绝对定位非常适合用来做“压盖”效果。我们来举个lagou.com上的例子。

“多套餐”下方黑色背景的文字都是通过“子绝父相”的方式的盖在大海报image的上方的。

我们知道，如果想让一个 标准流中的盒子居中（水平方向看），可以将其设置 margin: 0 auto 属性。

可如果盒子是绝对定位的，此时已经脱标了，如果还想让其居中，可以这样做：

如上方代码所示，我们先让这个宽度为600px的盒子，左边线居中，然后向左移动宽度（600px）的一半，就达到效果了。

固定定位：就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。

比如我们经常看到的网页右下角显示的“返回到顶部”，就可以固定定位。

我们经常能看到固定在网页顶端的导航条，可以用固定定位来做。

需要注意的是，假设顶部导航条的高度是60px，那么，为了防止其他的内容被导航条覆盖，我们要给body标签设置60px的padding-top。

（2）z-index值没有单位，就是一个正整数。默认的z-index值是0。

（3）如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。

（4）只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。 而浮动的元素不能用。

（5）从父现象：父亲怂了，儿子再牛逼也没用。意思是，如果父亲1比父亲2大，那么，即使儿子1比儿子2小，儿子1也能在最上层。

z-index属性的应用还是很广泛的。当好几个已定位的标签出现覆盖的现象时，我们可以用这个z-index属性决定，谁处于最上方。

以上是“CSS属性之定位属性的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

CSS属性之定位属性的示例分析

广东深圳宝安区建安一路海雅缤纷城4楼

其他资讯