HTML和CSS高级指南——定位详解

时间 2019-11-19

标签 html css 高级指南定位详解栏目 HTML 繁體版

原文原文链接

本文由大漠根据Shay Howe的《An Adavnced Guide to HTML & CSS》第二课《Detailed Positioning》所译，整个译文带有咱们本身的理解与思想，若是译得很差或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning，以及做者相关信息css

做者：Shay Howehtml

译者：大漠web

当在这一个页面上实现布局和定位有几种不一样的技术。使用哪一种技术，很大程序上取决于内容和目标页面，由于有不少技术比别人的更牛。浏览器

例如，浮动可让页面元素并排显示，并且还能够制做一个干净的布局。然而，有时候须要一些严格的定位，这时须要使用其余的技术，包括“relative”和“absolute”定位。less

在这节课中，咱们先来介绍一下浮动的使用，接下来详细介绍定位的技巧，包括如何准确的给元素在X轴、Y轴和Z轴定位。ide

包含浮动

建立一全页面的布局时，浮动是一种经常使用的方法，也是页面元素定位的一种基本功能。浮动可让元素一个挨着一个。浮动能够建立一个天然流布局，同时充许元素设置自身尺寸和其父元素容器的尺寸大小。布局

当元素浮动时，一个元素的位置依赖于放置在他周边的其余元素。那么围绕在他周边的是哪一个元素呢？这个元素会换行吗？这一切都取决于围绕于他的元素的DOM（文档对象模型）。ui

DOM是什么？

DOM是Document Object Model的简称，被译为文档对象模型。是HTML或者XML文档结构的API。在咱们的例子中，咱们说的是HTML的文档，所以DOM就是表明全部元素以及这些元素之间的关系。spa

能够考虑树形的表现方式，展元素元素之间的关系。元素嵌套时他们存在父子关系，相同级别的还存在兄弟关系。.net

虽然浮动至关的给力，但他们本身仍是存在必定的问题。最典型的问题就是一个父元素包含了多个浮动的子元素。页面的内容设置了一个宽度，子元素的浮动肯定了他们的位置，但浮动元素不会影响父元素的宽度。这样作会让父元素塌陷，从而使父元素的高度为“0”，以及忽略其余的属性。不少时候，这种现像都被忽略，特别是在父元素没有任何样式，以及其子元素看起来都正确的对齐。

嵌套的元素不会正确的排列，也会有错误的样式出现。来看看下面的演示，在“.box-set”的div应该有一个高亮的灰色背景，由于全部的子元素浮动后，这个灰色的背景色并不看到。仔细检查后，“.box-set”的高度变成了“0”。

HTML

<div class="box-set"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div>

CSS

.box-set { background: #e8eae9; } .box { background: #8ec63f; height: 100px; float: left; margin: 10px; width: 200px; }

DEMO效果

有一种方法，在容器的结束标签前添加一个空标签，在空标签上直接设置样式“clear:both”。用这种方法来清除浮动，在大多数状况下是有效的，但这不太适合语义化。这取决于一个页面有多少浮动须要清除，这样形成页面上的空标签迅速堆积，并且在页面中没有上下文内容。

幸运的是有几种不一样方法能够用来清除浮动，而其中用得最多的是“overflow”技巧和"clearfix"技巧。

Overflow技巧

一种清除浮动的技巧是使用“overflow”属性。在具备浮动元素的父容器中设置“overflow”的属性值为“auto”，这样父容器就会有一个高度存在，在咱们例子中的灰色背景也就能看获得了。

在IE6里面，父容器是须要设置一个“width”和“height”。由于高度多是一个变量，宽度为100%，他们将能正常的工做。使用“overflow:auto;”,在IE浏览器中会给元素添加滚动条，这样一来，最好是直接使用“overflow:hidden;”来清除浮动。

.box-set { background: #404853; overflow: auto; }

清除浮动后效果

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

不一样的浏览器对“overflow”属性解析不同，在浏览器的显示风格也不同。看看下面的例子，注意列在不一样浏览器的显示效果。

clearfix技巧

根据上下文，清除浮动更好的方法是clearfix技巧。“clearfix”清除浮动的技术是有点复杂，但有有比使用“overflow”技巧清除浮动更好的方法？

“clearfix”技巧是基于在父元素上使用“:before”和“:after”两个伪类。使用这些伪类，咱们能够在浮动元素的父容器前面和后面建立隐藏元素。“:before”伪类是用来防止子元素顶部的外边距塌陷，使用“display: table”建立一个匿名的“table-cell”元素。这也确保在IE6和IE7下具备一致性。“:after”伪类是用来防止子元素的底部的外边距塌陷，以及用来清除元素的浮动。

在IE6和7的浏览器中，加上“*zoom”属性来触发父元素的hasLayout的机制。决定了元素怎样渲染内容，以及元素与元素之间的相互影响。

采起上面一样的例子，你能够看到容器也清除了浮动，元素也能够移到父容器外面：

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

清除浮动后效果

有效的包含浮动

使用哪一种技巧来清除浮动，终究要看你本身喜爱。有些人坚持使用“clearfix”来清除浮动，由于这种方法能够贯穿整个项目。有些人认为“clearfix”技巧使用的代码太多，他仍是喜欢简单点的。至于使用什么技巧由您来决定，只要在运用了浮动的元素的父容器须要清除浮动。

一个常见的方法是将定义一个类名，把这个类名加到须要清除浮动的容器上。例如使用“clearfix”清除浮动，Dan Cederholm为容器设置了一个类名“group”。在须要清除浮动的容器上添加这个类名“group”。

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

单个伪类

值得注意的是，目前每一个元素只有一个“:before”和“:after”伪类。当你尝试使用其余的“:before”和“:after”的clearfix技巧，你的内容可能没法达到想要的效果。

在上面的例子中，clearfix的样式不该该直接插入到“.box-set”类中，应该是给须要清除浮动的元素中添加类名“group”。

定位属性

不少状况下，你须要控制更多元素的位置，并且超过了浮动所能提供的范围，这个时候咱们就须要发挥“position”属性的做用。“position”属性提供五个不一样的属性值，每种不一样的方式能够给元素提供不一样的位置。

Position static

元素都有position属性，其默认值是“static”，这也意味着，他们没有也不接受位置属性设置（top、right、bottom、left属性值设置）。另外元素设置了position属性，将会覆盖元素的默认值“static”。

在下面的演示中，全部的盒子都是静态的，每一个盒子都在相邻盒子顶部，由于他们都是块元素，并且没有进行浮动设置。

HTML

<div class="box-set"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div>

CSS

.box-set { background: #e8eae9; } .box { background: #8ec63f; height: 80px; width: 80px; }

效果

Position relative

“relative”是“position”的另外一个属性值，他和“static”属性值很是的类似。主要的区别是“relative”能够给元素设置位移（offset）“top、right、bottom和left”属性。经过这些位移属性设置能够给元素进行精确的定位。

盒子位移属性是如何工做？

盒子的位移属性有四个“top、right、bottom和left”，用来指定元素的定位位置和方向。这些属性只能在元素的“position”属性设置了“relative、absolute和fixed”属性值，才生效。

对于相对定位元素，这些属性的设置让元素从默认位置移动。例如，top设置一个值“20px”在一个相对定位的元素上，这个元素会在原来位置向下移动“20px”。反之，“top”设置一个“-20px”，这个元素会在原来的位置向上移动“20px”。

对于绝对定位和固定定位鲜红，这些属性指定了元素与父元素边缘之间的距离，例如，绝对定位的元素设置一个“top”值为“20px”，将使绝对定位元素相对于其设置了相对定位的祖先元素顶部边缘向下移动“20px”，反之，若是设置一个“top”值为“20px”，将使绝对定位元素相对于其设置了相对定位的祖先元素顶部边缘向上移动“20px”。（绝对定位的参考点是其祖先元素设置了“relative”或者“absolute”值）。

设置了位移属性的相对定位元素，他在页面中仍然是正常的、静态的，仍属于天然流。在这种状况下，其余元素不会占用相对定们元素当初的位置。此外，其余元素没有进行位置移动时，相对定伴元素可能会和其余元素重叠。

在下面的演示中，每一个元素仍是在另外一个元素顶部，而后他们根据本身移位属性，从默认位置进行移动，因为他们移向方向不同，这些值使元素重叠在一块儿。当元素设置了相对定时，周边的元素也能看到相对定位元素的默认位置。（也就是说，相对定位元素的默认位置仍是被元素自身占用，别的元素是没法占用的。也就是说相对定位元素的位移是相对于元素自身的边缘进行位移）。

HTML

<div class="box-set"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div>

CSS

.box-set { background: #e8eae9; } .box { background: #8ec63f; height: 80px; position: relative; width: 80px; } .box-1 { top: 20px; } .box-2 { left: 40px; } .box-3 { bottom: -10px; right: 20px; }

效果：

事实上，一个相对定位元素同时设置了“top”和“bottom”位移属性值，实际上“top”优先级高于“bottom”。然而，一个相对定位元素同时设置了“left”和“right”位移属性，他们的优先级取决于页面使用的是哪一种语言，例如，若是你的页面是英文页面，那么“left”位移属性优先级高，若是你的页面是阿拉伯语，那么“right”的位移属性优先级高。

Position absolute

绝对定位元素也具备盒子位移属性，然而，绝对定位元素会脱离文档流。绝对定位元素直接从文档流中移出，绝对定位元素的位置直接和父容器是否设置了相对定位（绝对定位）有直接关系。绝对定位元素须要至少一个祖先元素设置了相对定位（绝对定位），否则元素定位会相对于页面的主体进行定位。

使用绝对定位的元素能够指定垂直和水平的位移属性，使绝对定位元素相对于设置了相对定们的祖先元素边缘进行移位。例如，一个绝对定位的元素设置了“top”值为“50px”和一个“right”值为“100px”,绝对定位元素会相对于其设置了相对定位的父元素的顶边向下移动50px;向左移动100px。

然而，使用了绝对定位的元素并无进行任何盒子位移属性设置，那么绝对定位元素的顶部和左部会和设置了相对定位的父元素的顶边和左边重合。若是设置了一个盒子位移属性，好比说“top”，那么绝对定位元素垂直方向会进行移动，而水平位置默认仍是左边对齐。

在下面的演示中，你能够看到全部的盒子都相对于div的父元素进行绝对定位，每一个元素都从特定的面使用定位值进行移动，并且使用了负值的，元素移动到盒子的外面。

HTML

<div class="box-set"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div>

CSS

.box-set { background: #e8eae9; height: 200px; position: relative; } .box { background: #8ec63f; height: 80px; position: absolute; width: 80px; } .box-1 { top: 6%; left: 2%; } .box-2 { top: 0; right: -40px; } .box-3 { bottom: -10px; right: 20px; } .box-4 { bottom: 0; }

效果

当一个绝对定位的元素有固定的高度和宽度，而且盒子位移同时设置了“top”和“bottom”时，“top”更具优先组，另外和相对定位元素同样，当同时设置了“left”和“right”时，优先级取决于他的页面使用的语言。

当一个绝对定位的元素没有明确指定高度和宽度，同时使用盒子位移的“top”和“bottom”属性时，会使整个元素的高度跨越整个容器。一样的，当这个元素同时使用位移“left”和“right”属性值，会使整个元素的宽度跨越整个容器。若是同时使用位移四个属性，能够指定一个宽度和高度显示元素。（这个时候绝对定位元素的宽度和高度都是100%。）

Position fixed

固定定位和绝对定位很相似，可是他定位是相对于浏览器窗口，而且不会随滚动条进行滚动。也就是说，无论用户停留在页面那个地方，固定定位的元素将始终停留在页面的一个地方。“position”属性值中，仅有“fixed”属性值不能在IE6浏览器下运行，若是你想在IE6正常使用固定定位，那么你就须要为他写一些Hacks。

固定定位元素的盒子位移属性的使用和绝对定位的同样。

保持前面盒子移位，能够看到盒子固定定位是相对于浏览器窗口而不是设置了相对定位的父元素。

HTML

<div class="box-set"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div>

CSS

.box { background: #8ec63f; height: 80px; position: fixed; width: 80px; } .box-1 { top: 6%; left: 2%; } .box-2 { top: 0; right: -40px; } .box-3 { bottom: -10px; right: 20px; } .box-4 { bottom: 0; }

效果

固定页头和页脚

固定定位最多见的一种用途就是在页面中建立一个固定头部、或者脚部、或者固定页面的一个侧面。就算是用户移动浏览器的滚动条，仍是固定在页现与用户交流。

下面的示例代码能实现。注意如何设置“left”和“right”两个盒子位移，这使得“页脚”跨越了页面的整个宽度，而不需使用margin、border和padding来破坏盒模形就作了收缩自如。

HTML

< footer >Fixed Footer </footer>

CSS

footer { bottom: 0; left: 0; position: fixed; right: 0; }

z-index属性

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

通常来讲，在DOM中，元素出现的时候就放置在z轴上。在Dom中，元素在顶部的要低于底部的。改变这种层叠顺序能够直接使用“z-index”来控制。元素的“z-index”值越高将会出如今越上面，无论元素在Dom哪一个位置上。

给元素设置“z-index”属性，首先要在这个元素上设置了“position”属性值为“relatvie”、“absolute”或者“fixed”之一。一样的，你要使用盒子位移属性，你也要先确认元素设置了“positions”属性值为“relative”、“absolute”或者“fixed”之一。

在下面的登例子中，若是每一个盒子都不设置“z-index”，那么第一个box在第二个下面，第二个在第三个下面，第三个在第四个下面。若是在盒子中指定“z-index”的值，第二个盒子在第一个和第三个上面，第三个盒子在第四个上面。

HTML

<div class="box-set"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div>

CSS

 .box-set { background: #e8eae9; height: 160px; position: relative; } .box { background: #8ec63f; border: 3px solid #f7941d; position: absolute; } .box-1 { left: 10px; top: 10px; } .box-2 { bottom: 10px; left: 70px; z-index: 3; } .box-3 { left: 130px; top: 10px; z-index: 2; } .box-4 { bottom: 10px; left: 190px; z-index: 1; }

不设置z-index效果

设置z-index效果

扩展阅读

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了我的对技术的理解。若是翻译有不对之处，还烦请同行朋友指点。谢谢！

如需转载烦请注明出处：

英文原文：http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning

中文译文：http://www.w3cplus.com/css/advanced-html-css-lesson2-detailed-css-positioning.html