CSS元素定位

橙子0012 · 发表于 2018-4-17 11:54:59

一、元素定位机制

　　1.普通文档流

　　普通文档流将浏览器窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。　　

　　2.定位思想和浮动

　　CSS元素定位的基本思想很简单，它允许我们定义元素框相对于其正常位置应该出现的位置，或者相对于
父元素、另一个元素甚至浏览器窗口本身的位置。此外，CSS中的浮动允许元素向左或者向右移动。通常情况
下，我们使用div+css布局页面，而css布局中最重要的就是float属性。

　　3.一切皆为框

　　div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span
和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。可以使用 display 属性改变
生成的框的类型。通过将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一
样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，
不占用文档中的空间。

　　但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一
个块级元素（比如 div）的开头。即使没有把这些文本定义为段落，它也会被当作段落对待：

复制代码

<div>
/*文本生是无名框*/
some text
/*p为块框*/
<p>Some more text.</p>
</div>

复制代码

复制代码
　　在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。

　　块级元素的文本行也会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名框。
无法直接对无名块或行框应用样式，因为没有可以应用样式的地方（注意，行框和行内框是两个概念）。但
是，这有助于理解在屏幕上看到的所有东西都形成某种框。

　　4.CSS定位机制

　　CSS 有三种基本的定位机制：普通流、浮动和绝对定位。除非专门指定，否则所有框都在普通流中定
位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。块级框从上到下一个接一个地排
列，框之间的垂直距离是由框的垂直外边距计算出来。行内框在一行中水平布置。可以使用水平内边距、
边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水
平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这
个框的高度。

二、元素定位

　　在CSS中，用position属性来定位元素。position属性有4个取值，从而实现 4 种不同类型的定位，这会
影响元素框生成的方式。

　　1.static

　　position属性的默认值，表示CSS文档流定位，元素框正常生成。就是按照正常的布局流从上到下从左
到右布局，块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其
父元素中。平常我们设计网页时，没有指定 position，也就表示使用 static。

　　以下是position="static"的一个例子：

复制代码

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>文档流布局</title>
5 <style type="text/css">
6 #div1
7 {
8 width: 200px;
9 height: 100px;
10 background-color: blue;
11 /*显式声明文档流布局*/
12 position: static;
13 }
14 #div2
15 {
16 width: 200px;
17 height: 100px;
18 background-color: red;
19 /*这里将显式定位注释掉了，但效果与static一样，因为默认文档流布局*/
20 /*position: static;*/
21 }
22 </style>
23 </head>
24 <body>
25 <div id="div1">
26 </div>
27 <div id="div2">
28 </div>
29 </body>
30 </html>

复制代码

复制代码
　　2.relative

　　relative属性表示CSS相对定位，设置为相对定位的元素框会偏移原来的位置某个距离。通过top、right、
bottom和left属性来设置元素位置的偏移量。但是元素仍然保持其未定位前的形状，而且它原本所占的空间
仍保留。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，
让这个元素“相对于”它的起点进行移动。比如，将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的
地方；将left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
　　注意：相对定位实际上被看作普通流定位模型（static）的一部分，因为元素的位置相对于它在普通流
中的位置。

复制代码

/*相对定位*/
#box_relative {
position: relative;
left: 30px;
top: 20px;
}

复制代码

复制代码
　　下图是对上面CSS相对定位代码的说明：

　　以下是一个相对定位的例子：

复制代码

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>CSS相对定位</title>
5 <style type="text/css">
6 #div1
7 {
8 width: 200px;
9 height: 100px;
10 background-color: blue;
11 }
12 #div2
13 {
14 width: 200px;
15 height: 100px;
16 background-color: red;
17 }
18 #divRelative
19 {
20 width: 200px;
21 height: 100px;
22 background-color: yellow;
23 /*CSS相对定位，该元素会距它在文档流中的位置向右偏移100px,向下偏移50px*/
24 position: relative;
25 top: 50px;
26 left: 100px;
27 }
28 </style>
29 </head>
30 <body>
31 <div id="div1">
32 </div>
33
34 <div id="divRelative">
35 </div>
36 <div id="div2">
37 </div>
38 </body>
39 </html>

复制代码

复制代码
　　3.absolute

　　 absolute属性设置CSS绝对定位，设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，
包含块可能是文档中的另一个元素或者是初始包含块（即相对于position属性非static值的最近父级元素进行偏
移），如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。。元素原先在正常文档流中所
占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生
成何种类型的框。普通流中其它元素的布局就像绝对定位的元素不存在一样：

复制代码

/*绝对定位*/
#box_absolute{
position: absolute;
left: 30px;
top: 20px;
}

复制代码

复制代码
　　下图是对上面CSS绝对定位代码的说明：

　　下面是一个绝对定位的例子：

复制代码

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>CSS绝对定位</title>
5 <style type="text/css">
6 .divAbsolute
7 {
8 width: 200px;
9 height: 100px;
10 left: 50px;
11 top: 100px;
12 background-color: blue;
13 position: absolute; /*绝对定位,相对于浏览器window窗口偏移*/
14 }
15 #divAbsolutesub
16 {
17 width: 100px;
18 height: 50px;
19 left: 20px;
20 top: 20px;
21 background-color: yellow;
22 position: absolute; /*绝对定位，相对于class="divAbsolute"偏移*/
23 }
24 </style>
25 </head>
26 <body>
27 <div class="divAbsolute">
28 <div id="divAbsolutesub">
29 </div>
30 </div>
31 </body>
32 </html>

复制代码

复制代码
　　4.fixed

　　fixed属性表示CSS固定定位，它的模式与 absolute 相同，不过无论怎么拖动滚动条，它始终固定在屏幕
的指定位置。在 IE6 中不支持这个属性；在 IE7 中支持这个属性但需要指明 DOCTYPE；Firefox 等浏览器支
持这个属性。fixed定位的top、right、bottom、left 属性指相对于视口的。

　　下面是一个fixed定位的例子，模仿了一些网站右下角的广告信息：

复制代码

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>CSS fixed定位</title>
5 <style type="text/css">
6 #divFixed
7 {
8 width: 300px;
9 height: 200px;
10 font-size: 16px;
11 color: White;
12 font-weight: bold;
13 background: red;
14 position: fixed; /* top: 0px;
15 left: 0px;
16 */
17 right: 0;
18 bottom: 0;
19 }
20 /*设置内容高度使页面出现滚动条*/
21 #content
22 {
23 height: 2000px;
24 background-color:Green;
25 }
26 </style>
27 </head>
28 <body>
29 <div id="content">
30 </div>
31 <div id="divFixed">
32 你好，恭喜你获得腾讯QQVIP会员大礼包，赶快领取吧！
33 </div>
34 </body>
35 </html>

复制代码

复制代码
　　5.z-index

　　除了上述四个position取值，还有一个比较重要的属性—z-index。z-index 属性设置元素的堆叠顺序。拥
有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。通过top额lef属性定位元素的x轴和y轴，z-in
dex属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，
为负数则表示离用户更远。

　　注意：元素可拥有负的 z-index 属性值；Z-index 仅能在绝对定位元素上奏效（position:absolute;）。

　　下面是一个z-index属性应用的示例：

复制代码

1 <html>
2 <head>
3 <style type="text/css">
4 img.x
5 {
6 position:absolute;
7 left:0px;
8 top:0px;
9 z-index:-1
10 }
11 </style>
12 </head>
13
14 <body>
15 <h1>这是一个标题</h1>
16 <img class="x" src="/i/eg_mouse.jpg" />
17 <p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>
18 </body>
19
20 </html>

复制代码

梦想家 · 发表于 2018-5-9 16:29:10

		自动登录	找回密码
密码			(注-册)加入51Testing

CSS元素定位

站长推荐 /1