关于定位

水深无声 2022-05-29 03:17 223阅读 0赞

## 文档流 ##

相当于一种规则：

> 1.从左至右，从上到下的布局。  
> 2.符合html中标签本身含义的布局。比如独占一行等等。

## 脱离文档流 ##

**定位方式中应用**（`float,position:absolute，fixed`）

> 顾名思义，是指这个元素不受文档流规则的约束。它不遵从此时文档流的正常布局，比如从上向下从左往右等等。不受文档流的布局约束后，**这个标签在原文档流中所占的空间也被清楚掉**。

## position ##

**1. static**

> position的默认值，没有定位，元素出现在正常的流中。

**2.fixed**

> fixed定位是指元素的位置相对于浏览器窗口的固定位置，即使窗口滚动，它也不会滚动，且fixed定位使元素的位置与文档流无关，不占据空间，且会和其他元素发生重叠。

**3.relative**

> 1.相对它自己的正常位置的定位。  
> 2.**如果移动的值为负数，则直接换成整数；如果值为整数，则直接改变相对方向。**  
> 例如：bottom:-20px;就是向下移动20px;  
> 3.即使移动后上半部分与某些元素发生重叠。于下，即使相对元素的内容移动，但是预留空间的元素仍然保存在正常流动，不会对下面其他元素造成影响。

**注：** top:20px;是指元素的margin外侧和包裹元素的border内测之间的距离是20px;

**4.absolute**

> 绝对定位的元素相对于最近的已定位的父元素，如果元素没有已定位position或者设置了默认属性的父元素，那么它的位置相对于`<html>`.

## 脱离文档流导致的问题 ##

在文档流中，一般子元素都会将父元素容器撑开来，但是如果子元素position为fixed或者absolute，脱离文档流，父元素无法被撑开。  
**解决方案：**

> 1.给js中设置父元素高度等于子元素。  
> 2.给父元素强行设置高度。

## 重叠元素–z-index属性 ##

> z-index只能在position属性值为relative或absolute或fixed的元素上有效，

**原理：** z-index的值可以控制定位元素在垂直于显示屏幕（Z轴）上的堆叠顺序，值大的元素发生重叠时会在值小的元素上面。

*  默认时，如果位置重叠，**后者覆盖前者**。
 *  z-index的**值大者覆盖值小者**。
 *  一般而言，父元素和子元素是不能比较z-index的大小的（但是，如果我们将**子元素的z-index值设为负值，父元素不用设置，子元素会被父元素覆盖，重叠。**）
 *  **拼爹时代**，不同父元素下的子元素，如果父元素的Z-index大，那么子元素也会跟随父元素，覆盖父元素z-index小的那个子元素。
 *  **子不孝**。不同父元素下的子元素的z-index如果大，并不会将其父元素提携上来。

## position：sticky; ##

没有看懂[原博文][Link 1]说的意思，所以我就操作了一下。

> 1.就是说，在这个页面中的定位，无论将其赋予哪个元素，都会生效，并且，定位于页面的同一位置。  
> 2.同样可设置top值，这个值是border上边缘和包裹元素的下边缘之间的距离。，滚动起来就是和浏览器顶部的距离。

## float： ##

float浮动浮动浮动，也是很好玩，用会它，你的页面元素随便飘。

**特性：**

> 1.应用于文字环绕图片  
> 2.创建一个快级框  
> 3.多列浮动布局  
> 4.浮动元素的宽度，高度自适应，但可以设置其值。

[总结：][Link 2]

> 1.元素float的时候，该元素自己的display会变为block.  
> 2.父元素如果不加overflow:hidden,不会出现在父元素内，且父元素不被该元素撑开。  
> 3.float元素会占据行内元素空间，影响周围元素。但不会占据块级元素的空间。下一个元素会出现在浮动元素的位置。  
> 4.clear会根据值清除不同浮动对该元素的影响。.

[Link 1]: https://www.cnblogs.com/zhuzhenwei918/p/6112034.html
[Link 2]: http://blog.csdn.net/u014267351/article/details/50102387