欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

CSS position元素定位属性

程序员文章站 2022-06-19 10:49:53
本文主要是对CSS 的定位属性基础学习，写了一些实际使用的示例。 属性定义和语法 定义：指定一个元素在文档中定位方式，可以通过left，right，top，bottom调整元素的位置。 用法： div{ positon:static; } 赋值： static：默认值。元素根据正常的文档流进行排列， ......

本文主要是对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;
  }

　　效果图：

　CSS position元素定位属性

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;
  });

　　效果图：

CSS position元素定位属性

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;
  }

　　效果图：

CSS position元素定位属性

 

本文内容学习参考来自

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

[sticky实际使用详解]  

 

上一篇： 我绕路就能多收她20块钱

下一篇： 大数据Spark与Storm技术选型

推荐阅读