position

#### 1. 是什么
	position属性规定元素的定位类型。任何元素都可以定位，
	
	不论该元素本身是什么类型,绝对或固定元素会生成一个块级框，
	
	相对定位元素会相对于它在正常流中的默认位置偏移。

#### 2. position属性有五个可选值:  absolute、fixed、relative、static、inherit、sticky .
##### 2.1 static
	默认值。没有定位，元素出现在正常的流中。
	忽略 top, bottom, left, right 或者 z-index 声明。
##### 2.2 absolute
	生成**绝对定位**的元素.
	
	相对的是向上第一个不是static默认定位的元素，如果没有找到，则相对于document 
	注：(document对象 -- 代表整个HTML 文档,可用来访问页面中的所有元素：)。
	
	元素的位置通过left,top,right以及bottom属性进行规定。
 ##### 代码演示
```
   .father {
        width: 300px;
        height: 200px;
        margin-left: 100px;
        margin-top: 100px;
        position: absolute;
        background: yellow;
    }

.child {
    	width: 100px;
        height: 100px;
        position: absolute;
        background: green;
        top: 50px;
        left:50px;
    }
  <div class="father">
		<div class="child">child</div>
	</div>
```
为了更好的显示效果，父元素具有外边距，此时可以发现子元素相对于父元素的左上角定位。效果如下：
![1.png][1]

当去掉父元素的position：absolute是，效果图如下，此时子元素相对于document进行定位。效果图如下：
![2.png][2]
为了验证此时absolute相对document定位,编写如下代码

```
body{
    	height: 0px;
    }
```
效果如下图所示：
![3.png][3]
##### 2.3 fixed
 	生成绝对定位的元素，相对于浏览器窗口进行定位,不随滚动条滚动。
 	
 	元素的位置通过left、top、right以及bottom属性进行规定。
 
```
.father {
        width: 300px;
        height: 200px;
        margin-left: 100px;
        margin-top: 100px;
        position: absolute;
        background: yellow;
    }

.child {
    	width: 100px;
        height: 100px;
        
        position: fixed;
        
        background: green;
        top: 0px;
      
      <div class="father">
		<div class="child">child</div>
	</div>
```
效果如图所示：

![fixed.gif][4]
##### 2.4 relative
	生成相对定位的元素，相对于其自身正常位置(这个位置是static的位置)进行定位。
例，如下面代码就是static状态下。

```
 .father {
        width: 300px;
        height: 200px;
        background: yellow;
    }

.child {
    	width: 100px;
        height: 100px;
        background: green;
    }
   <div class="father">
		<div class="child">child</div>
	</div>
```
效果如下图所示：
![12.png][5]

当child的css设置为relative时，会相对于原位置进行定位

```
.child {
    	width: 100px;
        height: 100px;
        position: relative;
        background: green;
        top: 50px;
        left:50px;
    }
```
效果如下图所示
![13.png][6]
##### 2.5 inherit
	规定应该从父元素继承 position 属性的值。
##### 2.6 sticky
	css3新属性，实验性的属性，不推荐使用。

[1]: http://sylblog.xin/usr/uploads/2019/07/983074357.png
  [2]: http://sylblog.xin/usr/uploads/2019/07/2458925221.png
  [3]: http://sylblog.xin/usr/uploads/2019/07/2002576197.png
  [4]: http://sylblog.xin/usr/uploads/2019/07/881031158.gif
  [5]: http://sylblog.xin/usr/uploads/2019/07/2266362671.png
  [6]: http://sylblog.xin/usr/uploads/2019/07/1870273791.png

position

display:none和visibility:hidden

个人已发表论文

coder-syl

Comments | NOTHING