CSS-定位(Position)

CSS-定位(Position)

[toc]

学习自

菜鸟教程

Overview

CSS中HTML元素存在以下之后定位选项

PositionDesc
statichtml 元素的默认的定位方式(即没有定位),元素正常出现在文档流中
fixed相对于浏览器窗口是固定的
relative相对于自己的定位
absolute相对于父布局进行定位
sticky粘性定位, 相当于 relative 和 fixed 的结合体

static

HTML 元素的 默认 值,即没有定位,元素正常出现在文档流中,此定位方式不会受到 top right .. 的影响。

fixed

元素的位置相对于浏览器窗口是固定的。

Snag_2cdeee4

<!DOCTYPE <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Study Html</title>
  <style>
    h2 {
      width: 100%;
      border-left-style: solid;
      border-left-width: 5px;
      border-left-color: cornflowerblue;
      background-color: beige;
      position: fixed;
    }
  </style>
</head>

<body>
  <h2>This is a Fixed H2</h2>
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <!-- .... -->
  </ul>

</body>

</html>

relative

relative 定位是相对其 正常 的位置.

2018-11-22 091616

<!DOCTYPE <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Study Html</title>
  <style>
    h2 {
      border-left: 5px solid coral;
      background-color: aliceblue
    }

    h2.positive-left {
      position: relative;
      left: 20px;
    }

    h2.negative-left {
      position: relative;
      left: -20px;
    }
  </style>
</head>

<h2>This is a common normal H2!</h2>
<h2 class="positive-left">This is a left=20px H2!</h2>
<h2 class="negative-left">This is a left=-20px H2!</h2>

<body>


</body>

</html>

absolute

absolute 定位方式相对的是父布局,如果没有父布局,那么相对的是 html 节点。

Snag_2de0741

<!DOCTYPE <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Study Html</title>
  <style>
    h2 {
      border-left: 5px solid coral;
      background-color: aliceblue;
      position: absolute;
      top: 100px;
      left: 100px;
    }
  </style>
</head>

<h2>This is a common normal H2!</h2>
<p>绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于html</p>

<body>


</body>

</html>

sticky

sticky 是粘性定位,这种定位方式相当于 relativefixed 定位方式的结合体。

A99AEB2C-6874-4959-8E0F-77950CAEF9E4

<!DOCTYPE <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Study Html</title>
  <style>
    h2 {
      position: sticky;
      left: 10px;
      top: 0PX;
      border-left: 5px solid lightblue;
      background-color: antiquewhite;
      width: 100%;
    }
  </style>
</head>

<p>翻滚吧</p>
<p>翻滚吧</p>
<p>翻滚吧</p>
<p>翻滚吧</p>
<p>翻滚吧</p>
<h2>翻滚吧,牛宝宝!</h2>
<p>翻滚吧</p>
<p>翻滚吧</p>
<p>翻滚吧</p>
<p>翻滚吧</p>
<!-- ..... -->
<body>


</body>

</html>

重叠的元素

元素的定位与文档流无关,所以他们可以覆盖页面上的其他的元素,z-index 属性确定了哪个元素在上面,哪个元素在下面。

Snag_2f36fc8

<!DOCTYPE <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Study Html</title>
  <style>
    img {
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: -1;
    }
  </style>
</head>

<p>测试文本测试文本测试文本测试文本测试文本测试......</p>
<img src="./imgs/dog.png" />

<body>


</body>

</html>
Last modification:November 22nd, 2018 at 09:56 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment