【CSS学习(四) 定位】

419 阅读5分钟

定位

元素的定位一般分为相对定位、绝对定位和固定定位三种。

实现定位效果我们一般使用 position属性,该属性有以下值供我们调用

  • static:默认值。位置设置为 static的元素,它始终会处于文档流给予的位置。

  • inherit :规定应该从父元素继承 position 属性的值。但是任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 “inherit”。

  • fixed:生成固定定位的元素。默认情况下,可定位于相对于浏览器窗口的指定坐标。

    • 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
    • 不论窗口滚动与否,元素都会留在那个位置。但当父元素具有transform属性且不为none时,就会相对于父元素指定坐标,而不是浏览器窗口。
    • 该值会使元素脱离文档流
  • absolute,生成绝对定位的元素,相对于距该元素最近的已定位的父元素进行定位。

    • 此元素的位置可通过 “left”、”top”、”right” 以及 “bottom” 属性来规定。
    • 该值会使元素脱离文档流
  • relative:生成相对定位的元素,相对于该元素在文档中的初始位置进行定位

    • 通过 “left”、”top”、”right” 以及 “bottom” 属性来设置此元素相对于自身位置的偏移。

相对定位

相对定位使用 position属性的 relative值来实现。

定义后我们可以使用 “left”、”top”、”right” 以及 “bottom” 属性来使该元素相对于自身位置进行偏移。

设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。

我们尝试一下实现

<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
        .all{
            width: 300px;
            height: 300px;
            border: 3px solid red;
        }
        p{
            margin: 0;
            width: 100px;
            height: 100px;
            background: #ffcae4;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
<div class="all">
    <p>我是p元素</p>
</div>
</body>

使用position的 relative值使p元素的位置进行偏移

position: relative;
right: 50px;

定义完后,想象中的偏移效果应该是会向右边偏移50px

但实际上 它会向左偏移50px

这理解起来也很简单,我们直接按下 F12,看一眼p标签的盒子模型。

可以看到,定义 position属性后,在外边距外面会多出一层 position。

我们写的right: 50px;实际上就是在 position这一层的右边添加了50px。

这添加的50px自然会将我们的元素往左挤50px,也就造成了你以为的反方向偏移。

那我们想让该元素向右偏移 50px应该写right: -50px;才对

绝对定位

当我们把一个元素设置成绝对定位后,那么该元素将会脱离文档流,其他元素就会认为这个元素不存在于文档流中而填充它原来的位置。绝对定位元素根据它的参照物移动自己的位置,而参照物则需要根据它父元素的定位设置来确定。如果没有一个父元素设置定位,那么参照物是body层

父元素没有定位的情况

我们将上文中的 relative修改为 absolute

直接观察浏览器中的效果

可以看到,当我们的父元素(div)没有设置定位时。它的参照物为上一层的 body

我们为 body设置边框或者按下 F12能够很直观的看出来。

父元素有定位的情况

我们使用 transform:translate(500px)使 div标签向x轴偏移 500px

祖先元素只要设置了值不为 position:static之外的值,都视为有定位,并且最近的祖先元素会被设置为绝对定位元素的参照物。

固定定位

固定定位与绝对定位相似,但元素的包含块为 viewport 视口。

该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。

你可以把它理解为右下角弹出的小广告(不是

当我们把一个元素设置成固定定位后,那么该元素也将会脱离文档流

position: fixed;
right: 0px;
bottom: 0px;

z-index

z-index属性用于设定元素的层级,虽然我们的网页理论上只能显示二维效果,但并不意味着不存在层级这一概念。

上图为下列代码中定义的四个 div元素,为了凸显其层次故意添加了阴影。

<head>    
	<style>
        div{
            border: 1px solid black;
            position: absolute;
            top: 100px;
            left: 100px;
            box-shadow: 3px 3px 2px #666666;
            text-align: right;
        }
        .div1{
            width: 160px;
            height: 160px;
            background: #ffe0dc;
        }

        		.......
        
        .div4{
            width: 100px;
            height: 100px;
            background: #f5f3f3;
        }
    </style>
</head>
<body>
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
</body>

可以发现,其层级顺序是按照 div元素的定义顺序决定的。后定义的元素层级会在先定义的元素之上

但该顺序是可以被改变的,我们上面也说过了 z-index属性用于设定元素的层级。

z-index 属性可以设置元素的堆叠顺序,也就是在元素Z轴上的层级。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。但是注意的是该属性只有在设置了positon定位之后才会生效。

尝试将第二个 div标签置于所有 div标签之上

同级下,z-index的值越大,堆叠顺序越靠前.

z-index值相同时,后定义的元素会在先定义的元素的层级之上。

z-index的值是可以设置0和负数的。

为了确认div3和 div4确实在 div2底下,我们可以使用 opacity属性为 div2标签设置透明度


放松一下眼睛

夹带私货(不是

原图P站地址

画师主页