CSS - Position

零、概念：

• static 自然模型
  
  a、如果两个相邻间的元素都设置了外边距（且有效），则他们之间的距离取决于最大的那个元素的外边距，而不是两个元素的外边距相加。
• relative 相对定位模型
  
• absolute绝对定位模型
  
  a、填充
  
  
  b、左右居中
  
  
  c、上下左右居中
  
  
• fixed 固定定位模型
  
• sticky 磁贴定位模型
  
  Ps1：矩形定位。
  Ps2：以前都是用 JS 实现的，现在用CSS3即可。
  Ps3：与fixed的区别是：这个可以在中间某一块想要固定top:npx;的时候才会固定，而不像fixed一开始进入页面就直接固定死在某一个位置。

 

一、常用的三种定位：

1. 相对定位：相对于自己原来的位置(以自己原来的位置为参考点)，做偏移。
2. 绝对定位：以就近的父元素(必须是祖先级别，不能是同辈级别。如果父元素没定位，就以爷爷（或祖先）作为参考点；如果有定位，只要是position即可。)，做偏移。
3. 固定定位：始终以电脑屏幕的左上角为参考点（无论它父级是否加 position），做偏移。（补充：background-attachment:fixed; /* 背景图固定 */）

 

二、注意事项：

Ps1：一般父元素设置：position:relative; 子元素设置：position:absolute。

Ps2：absolute 定位导致 width 自适应失效，需要写死 width。

/* absolute 定位导致 width 自适应失效，需要写死 width */
.nav ul li{ position:relative; }
.nav .menu{ position:absolute; left=10px; top=20px; width:100px; }

<div class="nav">
	<ul>
		<li>女装
			<div class="menu"><a>1</a><a>2</a></div>
		</li>
	</ul>
</div>

Ps3：relative（占空间），fixed、absolute（不占空间，浮在上面）。

Ps4：z-index（默认值 0）（可以设置负数）（数字越大越在前面，若数字一样，则看层级关系，后面的代码覆盖（越在前面）前面的代码）（与 left、top 一样，必须要在 position 基础上才有效）。点击打开链接

Ps5：position:absolute; left:0; right:0; 因为宽度没了，但是又不想加宽度，所以用left、right把它撑开。

Ps6：

• position:absolute; /* 不能用 margin:0 auto; 居中。更不推荐用数学计算的方式，因为会局限在父级，每次都算，很麻烦。 */
• position:absolute; left:50%; margin-left:-(宽度一半)px; /* 推荐，水平居中，垂直居中类似 */

 

三、常见问题：

Q1：为何父元素推荐设置 relative 呢？

A1：如果父元素设置 absolute 的话，因为电脑分辨率不一样，以及逻辑上一样的参考点但物理上的参考点不一样导致显示不理想。