position 定位

www.jswusn.com CSS 2018-11-12 19:39:37 2883次浏览

  近期有个新来的实习同事,对于position定位相关问题不是太明白,包括自己之前参加公司面试,也会问到一些position定位相关问题,可是往往有将近一半的人不能够对position有一个清晰明确的描述。于是决定在这里把position属性介绍一番。

  定义

  规定元素的定位类型。

  属性值

  · static:默认值。元素按照正常文档流呈现。

  · absolute:生成绝对定位的元素,该元素相对于第一个position值为非static的父元素定位(如果没有,则相对于body定位)。

  · fixed:生成绝对(固定)定位的元素,该元素相对于浏览器窗口进行定位。

  · relative:生成相对定位的元素,该元素相对于其在文档流正常位置定位。

  · sticky:生成粘贴定位元素,粘贴定位是相对定位和固定定位的混合,元素在跨越特定阈值前为相对定位,之后为固定定位。因此必须指定top、bottom、left或right中的某个值,否则粘贴定位无效。该元素相对于其在文档流正常位置和最近块级祖先元素定位,即:元素为跨越阈值前,其位置为文档流正常位置;一旦跨越阈值,元素变为固定定位,只要其最近块级祖先元素在可视区域,其位置不变,最近块级祖先元素一旦消失,其也会随着消失。(语言表述毕竟有所局限,但此属性值威力巨大,强烈建议各位看官自己动手试上一试!)

  · inherit:从父元素继承position属性值。

  元素性质

  · 当属性值为absolute或fixed时,不管元素本身类型如何,都会被当作块级元素。

  · 当属性值为relative或sticky时,元素性质不会改变,内联元素仍然是内联元素,块级元素仍然是块级元素。

  z-index

  1、只有当position属性值为absolute、relative或fixed时,z-index属性才会生效。

  2、z-index属性值大的元素会覆盖在值小的元素之上,即值越大离用户越近。当两个元素的z-index值相同时,在DOM树中后出现的元素会覆盖先出现的元素。

  position示例

  本示例html代码如下:

<div class="container">
    <div class="help-div"></div>
    <div class="common-position-style ***-position-style"></div></div>

  基础CSS如下:

/* 容器为一个相对定位元素,向下和向右均偏移 100px */
.container {
    position: relative;
    top: 100px;
    left: 100px;
    width: 600px;
    height: 400px;
    background-color: dimgrey;
}
/* 辅助 div 元素,宽 300px,高 200px */
.help-div {
    width: 300px;
    height: 200px;
    box-sizing: border-box;
    border: 3px solid blueviolet;
}
/* 被操作 div 中的基础 CSS 属性,宽 300px,高 200px */
.common-position-style {
    width: 300px;
    height: 200px;
    box-sizing: border-box;
    border: 3px solid yellow;
    background-color: yellowgreen;
}

  static

  css

.static-position-style {
    position: static;
    left: 50px;
    top: 50px;
}

  效果图

1542022411899002.jpg

  解析

  如上图,设置static效果与正常文档流效果一致。left和top值在这里没有效果。

  absolute

  CSS

.absolute-position-style {
    position: absolute;
    left: 50px;
    top: 50px;
}

  效果图

1542022638155270.jpg

  解析

  如上图,元素被绝对定位,相对于其父容器(这里其父容器为相对定位)向下和向右偏移50px。

  fixed

  CSS

.fixed-position-style {
    position: fixed;
    left: 50px;
    top: 50px;
}

  效果图

1542022891982970.jpg

  解析

  如上图,元素被固定定位,相对于浏览器窗口向下和向右偏移50px。注意这里和absolute的区别(参照物不一样)。

  relative

  CSS

.relative-position-style {
    position: relative;
    left: 50px;
    top: 50px;
}

  效果图

1542023069867365.jpg

  sticky示例

  本示例html如下:

<div class="container">
    <dl>
        <dt>A</dt>
        <dd>AAA</dd>
        <dd>ABA</dd>
        <dd>ACA</dd>
    </dl>
    <dl>
        <dt>B</dt>
        <dd>BBB</dd>
        <dd>BAB</dd>
        <dd>BCB</dd>
    </dl>
    <dl>
        <dt>C</dt>
        <dd>CCC</dd>
        <dd>CAC</dd>
        <dd>CBC</dd>
    </dl>
    <dl>
        <dt>D</dt>
        <dd>DDD</dd>
        <dd>DAD</dd>
        <dd>DBD</dd>
    </dl>
    <dl>
        <dt>E</dt>
        <dd>EEE</dd>
        <dd>EAE</dd>
        <dd>EBE</dd>
    </dl>
    <dl>
        <dt>F</dt>
        <dd>FFF</dd>
        <dd>FAF</dd>
        <dd>FBF</dd>
    </dl>
</div>

  效果图

1542026502130654.gif

  解析

  如上图可以看到,随着滚动条的滚动,标题行先是按照正常文档流位置显示,当到达容器顶端一定位置后,会固定住不动;之后随着自身父元素的消失而消失。这就是sticky这个属性值带给我们的功能,先滚动,到达一定位置固定住。(之前被面试,问到这个sticky这个属性值还一脸懵逼。然后面试官就说怎么实现先滚动,滚动到一定距离固定住这么一个需求,当时只想到了用JS实现,但是JS实现也是挺麻烦的。有了这个属性之后,打击能力提升n倍!)

  z-index示例

  本示例html代码:

<div class="container">
    <div class="z-index-negative-100" ></div>
    <div class="z-index-auto" ></div>
    <div class="z-index-100" ></div>
    <div class="z-index-1000" ></div>
</div>

  CSS代码:

body {
    margin: 0;
    background-color: beige;
}

.container {
    position: relative;
    top: 100px;
    left: 100px;
    width: 600px;
    height: 400px;
    background-color: dimgrey;
}

.container > div {
    width: 300px;
    height: 200px;
    box-sizing: border-box;
    position: absolute;
}

.z-index-auto {
    border: 3px solid yellow;
    background-color: yellowgreen;
}

.z-index-negative-100 {
    left: 50px;
    top: 50px;
    z-index: -100;
    border: 3px solid blue;
    background-color: lightblue;
}

.z-index-100 {
    left: 100px;
    top: 100px;
    z-index: 100;
    border: 3px solid red;
    background-color: lightcoral;
}

.z-index-1000 {
    left: 150px;
    top: 150px;
    z-index: 1000;
    border: 3px solid green;
    background-color: lightgreen;
}

  效果图

1542026767322072.jpg

  解析

  如上图,可以看到z-index值最大的元素,显示在最上层。即值越大,越靠近用户显示。细心地童鞋会发现少了一个元素,是因为此元素z-index设置了负值,而其父元素是相对定位,所以此元素显示在了其父元素下方,就看不见了。


技术分享

苏南名片

  • 电话:152-1887-1916
  • 邮箱:message@jswusn.com
  • 地址:江苏省苏州市相城区

热门文章

Copyright © 2018-2024 jswusn.com 版权所有

技术支持:苏州网站建设  苏ICP备18036849号