定位学习笔记

原文: http://www.w3cplus.com/css/advanced-html-css-lesson2-detailed-css-positioning.html © w3cplus.com

摘录:

Position absolute##

1.使用了绝对定位的元素但是没有进行任何盒子位移属性的设置,那么该元素顶部和左部会和设置了相对定位或者绝对定位的父元素的顶边和左边重合。如果只设置了“top”,那么该元素垂直方向会进行移动,水平位置默认左对齐。

2.当一个绝对定位的元素没有明确指定高度和宽度,同时使用盒子位移的“top”和“bottom”属性时,会使整个元素的高度跨越整个容器。同样的,当这个元素同时使用位移“left”和“right”属性值,会使整个元素的宽度跨越整个容器。如果同时使用位移四个属性,可以指定一个宽度和高度显示元素。(这个时候绝对定位元素的宽度和高度都是100%。)

Position fixed##

1.固定定位和绝对定位很类似,固定定位元素的盒子位移属性的使用和绝对定位的一样。但是他定位是相对于浏览器窗口,并且不会随滚动条进行滚动。

2.“position”属性值中,仅有“fixed”属性值不能在IE6浏览器下运行,如果你想在IE6正常使用固定定位,那么你就需要为他写一些Hacks。

3.固定页头和页脚

固定定位最常见的一种用途就是在页面中创建一个固定头部、或者脚部、或者固定页面的一个侧面。就算是用户移动浏览器的滚动条,也不移动。

< footer >Fixed Footer </footer>	
.footer {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
}	

z-index属性##

1.给元素设置“z-index”属性,首先要在这个元素上设置了“position”属性值为“relatvie”、“absolute”或者“fixed”之一

2.同样的,你要使用盒子位移属性,你也要先确认元素设置了“positions”属性值为“relative”、“absolute”或者“fixed”之一

3.通常都认为Web页面是二维页面,显示的元素都在X轴和Y轴上。当你的元素有定位时,他们有时候会放置在另一个元素的顶部。要改变这些元素是一个 怎么样的层叠顺序,要知道z轴,z轴是用“z-index”属性来控制的。

float##

Overflow技巧###

1.在具有浮动元素的父容器中设置“overflow”的属性值为“auto”,这样父容器就会有一个高度存在。使用“overflow:auto;”。
在IE浏览器中会给元素添加滚动条,这样一来,最好是直接使用“overflow:hidden;”来清除浮动。

2.在IE6里面,父容器是需要设置一个“width”和“height”。

3.使用“overflow”技巧清除浮动,确实存在一些缺点。
例如:当你添加样式,或者将嵌套在里面的“span”元素移动到父容器的外面,或者你想给元素添加一个盒子阴影和制作一个下拉菜单。在下面的演示例子中,你可以看到元素的盒子阴影被切断在父元素之内。

不同的浏览器对“overflow”属性解析不一样,在浏览器的显示风格也不一样。

clearfix技巧###

“clearfix”技巧是基于在父元素上使用“:before”和“:after”两个伪类。
使用这些伪类,我们可以在浮动元素的父容器前面和后面创建隐藏元素。

.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  *zoom: 1;
}	

注:“:before”伪类是用来防止子元素顶部的外边距塌陷。
使用“display: table”创建一个匿名的“table-cell”元素。这也确保在IE6和IE7下具有一致性。
“:after”伪类是用来防止子元素的底部的外边距塌陷,以及用来清除元素的浮动。

原文地址:https://www.cnblogs.com/godot-blog/p/6535190.html