css position属性学习

css position 属性

首先准备一下测试的html代码：

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>
<div class="seven"></div>

1,absolute:中文意思为绝对的，生成绝对定位的元素，元素的位置经过 "left", "top", "right" 以及 "bottom" 属性进行规定。

 

 1         .one{
 2             position: absolute;
 3             width: 500px;
 4             height: 500px;
 5             border: 1px solid #000;
 6             top: 100px;
 7             left: 100px;
 8         }
 9         .two{
10             position: absolute;
11             width: 500px;
12             height: 500px;
13             border: 1px solid #000;
14             top: 700px;
15             left: 100px;
16         }

在这里咱们就将class为one和two的两个元素的position设置为absolute，这两个元素就被固定在了网页的某个位置，不会由于其余的一些因素而改变。当鼠标向下滚动时，没有变化。效果图：

 

 

2，fixed：生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置经过 "left", "top", "right" 以及 "bottom" 属性进行规定。

添加代码：

        .three{
            position: fixed;
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            top: 300px;
            left: 700px;
        }

当咱们鼠标向下滚动时，class为three这个元素至关于固定在窗口的某个位置。可自行测试效果。图片很差展现效果。

 

右边的滚动条我向下拉动了一点，可是class为three这个元素在窗口中的位置仍是没变，而另外两个变了。

3，relative：生成相对定位的元素，相对于其正常位置进行定位。所以，"left:20" 会向元素的 LEFT 位置添加 20 像素。相对定位会按照元素的原始位置对该元素进行移动。

代码为：

1 <h2>这是标题正常位置</h2>
2 <h2 class="left">这是标题向左移动位置</h2>
3 <h2 class="right">这是标题向右移动位置</h2>

1         h2.left{
2             position: relative;
3             left: -30px;
4         }
5         h2.right{
6             position: relative;
7             left: 30px;
8 
9         }

样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。

样式 "left:20px" 向元素的原始左侧位置增长 20 像素。

4,static：默认值。没有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

5,sticky：基于用户的滚动位置来定位。

　　粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

　　它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

　　元素定位表现为在跨越特定阈值前为相对定位，以后为固定定位。

　　这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可以使粘性定位生效。不然其行为与相对定位相同。