position定位

position属性指定了元素定位的类型

position属性的五个值

static

relative

fixed

absolute

sticky

static定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。

<style>
    div.lx{
      position: static;
      background-color: lightblue;
      font-size: 20px;
    }
  </style>
</head>
<body>
<div class="lx">长城（The Great Wall），又称万里长城，是中国古代的军事防御工事</div>
<p>HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
  静态定位的元素不会受到 top, bottom, left, right影响。</p>
</body>
</html>

png

fixed 定位

元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。

 <style>
    div.lx{
      position: fixed;
      top:30px;
      right: 20px;
      font-size: 15px;
      text-align: center;
      background-color: lightblue;
    }
  </style>
</head>
<body>
<div class="lx"><span>长城（The Great Wall），又称万里长城</span>
<p>fixed定位元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动</p></div>
<p>长城资源主要分布在河北、北京、天津、山西、陕西</p><p>长城资源主要分布在河北、北京、天津、山西、陕西</p>
<p>长城资源主要分布在河北、北京、天津、山西、陕西</p><p>长城资源主要分布在河北、北京、天津、山西、陕西</p>
<p>长城资源主要分布在河北、北京、天津、山西、陕西</p><p>长城资源主要分布在河北、北京、天津、山西、陕西</p>
<p>长城资源主要分布在河北、北京、天津、山西、陕西</p><p>长城资源主要分布在河北、北京、天津、山西、陕西</p>
</body>
</html>

png

relative 定位

相对定位元素的定位是相对其正常位置。

<style>
    div.lx{
      position: relative;
      left: -40px;
      font-size:20px;
      background-color: #a6d8a8;
    }
    div.lx1{
      position: relative;
      left: 40px;
      font-size: 20px;
      background-color: #a6d8a8;
    }
  </style>
</head>
<body>
<h1>这是一个没有定位的标题</h1>
<div class="lx">在中国悠久的历史文化传承中</div><br>
<div class="lx1">在中国悠久的历史文化传承中</div>
</body>
</html>

png

absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。

<style>
    div.lx{
      position: absolute;
      left: 200px;
      top:100px;
    }
  </style>
</head>
<body>
<h1>这是一个没有定位的标题</h1>
<div class="lx">
  <p>绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html></p>
  <p>absolute 定位使元素的位置与文档流无关，因此不占据空间。定位的元素和其他元素重叠</p>
</div>
</body>
</html>

png

sticky 定位

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

<style>
    div.lx{
      position: sticky;
      top:2px;
      background-color: darkturquoise;
    }
  </style>
</head>
<body>
<div class="lx">
  <h1>sticky 粘性定位</h1>
</div>
<div style="padding-bottom: 1000px">
<p>来回滑动</p><p>来回滑动吧</p><p>快来回滑动</p><p>来回滑动</p>
<p>来回滑动1</p><p>来回滑动2</p><p>来回滑动3</p><p>来回滑动4</p>
<p>来回滑动5</p><p>来回滑动6</p><p>来回滑动7</p><p>来回滑动8</p>
</div>
</body>
</html>

png

重叠的元素

z-index属性指定了一个元素的堆叠顺序（正负数决定元素放在前面或者后面）。

 <style>
    img{
      position: absolute;
      top: 1px;
      left: 1px;
      z-index: -20;/*负数决定元素放在后面*/
    }
  </style>
</head>
<body>
<h1 style="color: hotpink">这是荔波小七孔的风景图片</h1>
<img src="https://img0.baidu.com/it/u=2115923810,4134479620&fm=26&fmt=auto">
</body>
</html>

png

2021-10-11