当前位置： 移动技术网 > IT编程>网页制作>CSS > CSS position元素定位属性

CSS position元素定位属性

2020年03月19日  | 移动技术网IT编程  | 我要评论

6酷,采采风荷,超级搞笑二人转

本文主要是对css 的定位属性基础学习，写了一些实际使用的示例。

属性定义和语法

定义：指定一个元素在文档中定位方式，可以通过left，right，top，bottom调整元素的位置。

用法：
    div{
        positon:static;
    }

赋值：

　　static：默认值。元素根据正常的文档流进行排列，设置left，right，top，bottom，z-index值无效。

　　relative：生成相对定位元素。元素根据正常的文档流进行排列，可以设置left，right，top，bottom调整在文档流中的 位置，设置z-index显示层级。table的部分元素不会生效。

　　absolute：生成绝对定位元素。元素会被移除出正常的文档流，绝对定位元素会相对距离最近非static定位的元素进行偏移。设置left，right，top，bottom是对最近非staic元素位置方向和偏移距离，设置z-index显示层级。

　　fixed：生成固定位置元素。元素会被移除出正常的文档流，相对浏览器视窗窗口进行固定定位，设置left，right，top，bottom规定相对浏览器视窗的位置。设置z-index显示层级。

　　sticky：生成粘性定位元素。相对最近的滚动祖先元素和块级祖先元素进行偏移，元素在跨越特定阈值前表现为相对定位（relative），跨越阈值后表现为固定定位（fixed）。left，right，top，bottom是粘性定位的阈值。

示例

static、relative示例

　　static元素正常的文档流排列，设置了left，z-index但是没有作用。

　　relative元素仍然排在正常文档流元素的后面，但是可以设置top，z-index值，top这些值决定了他与其他元素的位置，z-index决定了显示的层级。

　　html代码：

<body>
  <div class="static">
    static
  </div>
  <div class="relative">
    relative
  </div>
</body>

　　css代码:

  .static {
    width: 100px;
    height: 100px;
    left: 10px;
    z-index: 99;
    background-color: slateblue;
  }

  .relative {
    width: 100px;
    height: 100px;
    position: relative;
    top: -50px;
    left: 50px;
    z-index: 98;
    background-color: skyblue;
  }

　　效果图：

　

fixed示例

　　fixed可以将元素固定浏览器窗口的任意位置，在实际开发中有多种用途，比如顶部导航、返回顶部的按钮等功能。下面的例子是一个返回顶部按钮的功能。

　　html代码：

<body>
  <header>
    <h1>震惊!点击箭头可以跳转上来</h1>
  </header>
  <div class="text">
    <p>
      lorem ipsum dolor sit amet consectetur adipisicing elit. quae facilis tenetur veritatis quos consequuntur
      lorem 数字 可以自动填充文本，数字表示填充的文本单词的数量
    </p>
  </div>
  <div class="fixed" id="fixed">
    <?xml version="1.0" standalone="no"?>
    <!doctype svg public "-//w3c//dtd svg 1.1//en"             "http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd">
    <svg t="1584504540391" class="icon" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
      p-id="1671" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="80">
      <defs>
        <style type="text/css"></style>
      </defs>
      <path
        d="m509.44 267.52c504.32 262.4 498.56 259.84 492.8 258.56 488.96 256.64 484.48 256 480 256s471.04 256.64 467.2 258.56c461.44 259.84 455.68 262.4 450.56 267.52l-313.6 313.6c-14.08 14.08-14.08 35.84 0 49.92 14.08 14.08 35.84 14.08 49.92 0l448 369.92l0 558.08c448 945.92 462.08 960 480 960s512 945.92 512 928l512 369.92l261.12 261.12c14.08 14.08 35.84 14.08 49.92 0 14.08-14.08 14.08-35.84 0-49.92l509.44 267.52zm864 128l-768 0c78.08 128 64 142.08 64 160 64 177.92 78.08 192 96 192l768 0c881.92 192 896 177.92 896 160 896 142.08 881.92 128 864 128z"
        p-id="1672"></path>
    </svg>
  </div>
</body>

　　css代码：

  h1 {
    text-align: center;
  }

  .text {
    width: 80%;
    margin: 0 auto;
  }

  .fixed {
    position: fixed;
    bottom: 20px;
    right: 20px;
  }

　　js代码：

  const fixed = document.getelementbyid('fixed');
  fixed.addeventlistener('click', () => {
    document.body.scrolltop = document.documentelement.scrolltop = 0;
  });

　　效果图：

sticky示例

　　sticky粘性定位给人一种结合了relative和fixed效果的感觉，sticky元素在没有抵达设定的阈值之前，效果类似于relative元素，在普通文档流正常排列；当元素跨过这个阈值后，元素的表现形式又和fixed元素相似，形成固定定位。由于必须要设置阈值才能生效，所以必须设定left，right，top，bottom四个阈值其中之一。如果没有阈值，和relative元素效果一致。

　　这是一个实验性质的属性，现在的浏览器中并没有太好的兼容性，使用前需要谨慎。

　　sticky示例，下面实现具有吸顶效果列表。

　　html代码：

<body>
  <div>
    <div class="sticky">
      a
    </div>
    <div class="name-item">阿福</div>
    <div class="name-item">阿虎</div>
    <div class="name-item">阿里云</div>
  </div>
  <div>
    <div class="sticky">
      b
    </div>
    <div class="name-item">包老师</div>
    <div class="name-item">爸</div>
    <div class="name-item">必须</div>
    <div class="name-item">百度</div>
  </div>
  <div>
    <div class="sticky">
      c
    </div>
    <div class="name-item">常威</div>
    <div class="name-item">蝉</div>
    <div class="name-item">曹操</div>
    <div class="name-item">陈某</div>
  </div>
  <div>
    <div class="sticky">
      t
    </div>
    <div class="name-item">腾讯</div>
  </div>
</body>

　　css代码：

  .sticky {
    width: 100%;
    height: 30px;
    position: sticky;
    background-color: tomato;
    top: 0px;
  }

  .name-item {
    height: 20px;
    padding: 5px;
    border-bottom: 1px solid grey;
  }

　　效果图：

 

本文内容学习参考来自

[mdnposition基础讲解]  https://developer.mozilla.org/zh-cn/docs/web/css/position

[sticky实际使用详解]  

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网