CSS的positon，我想做为一个Web制作者来说都有碰到过，但至于对其是否真正的了解呢？那我就不也说了，至少我自己并不非常的了解其内核的运行。今天在Learn CSS Positioning in Ten Steps一文中分十步介绍了CSS的“position”中的“static、relative、absolute、float”使用，觉得蛮有意思的。整理了一下贴上来与大家一起分享。希望大家能喜欢。
在图解这十个过程之前，我将实例的代码放上来，好让大家一个实体参考：
HTML Markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div id="example"> <div id="div-before"> <p>id = div-before</p> </div> <div id="div-1"> <div id="div-1-padding"> <p>id = div-1</p> <div id="div-1a"> <p>id = div-1a</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p> </div> <div id="div-1b"> <p>id = div-1b</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p> </div> <div id="div-1c"> <p>id = div-1c</p> </div> </div> </div> <div id="div-after"> <p>id = div-after</p> </div> </div> |
CSS Code
简单的运用一点样式：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
#example { float: right; } #example p { margin: 0 0.25em; padding: 0.25em 0; } #div-before, #div-after { background-color: #88d; color: #000; } #div-1 { width: 400px; background-color: #000; color: #fff; } #div-1-padding { padding: 10px; } #div-1a { background-color: #d33; color: #fff; } #div-1b { background-color: #3d3; color: #fff; } #div-1c { background-color: #33d; color: #fff; } |
初步效果：
为了后面能更好的了解相关知识点，我特将此例的DOM草图画出来：
上面的DOM图，我想大家一定非常容易的理解，下面就一起来主要看position的使用。
第一步：position: static
在CSS中所有元素的“position”属性的默认值都是“static”，因为不需要显式的为每个元素设置“position:static”。此时大家会问，那这个属性值是不是没有任何意义呢？其实不是的，他在CSS中也会起着很大的作用。我们来看一个实例：
比如说你的两个页面，同时存在“div#div-1”，那么此时你在A面中需要对“div#div-1”进行绝对定位；而在B页面中“div#div-1”又不需要进行绝对定位。
A页面中“div#div-1”绝对定位：
|
1 2 3 |
#div-1 { position: absolute; } |
此时在B页面中不想在进行绝对定位，那么我们就必须在你的样式中显式的重新设置“#div-1”的postion属性为“static”
|
1 2 3 |
body.B #div-1 { position: static;ȶ作者来说都有碰到过，但至于对其是否真正的了解呢？那我就不也说了，至少我自己并不非常的了解其内核的运行。今天在Learn CSS Positioning in Ten Steps一文中分十步介绍了CSS的“position”中的“static、relative、absolute、float”使用，觉得蛮有意思的。整理了一下贴上来与大家一起分享。希望大家能喜欢。
在图解这十个过程之前，我将实例的代码放上来，好让大家一个实体参考： HTML Markup
CSS Code 简单的运用一点样式：
初步效果：
为了后面能更好的了解相关知识点，我特将此例的DOM草图画出来：
上面的DOM图，我想大家一定非常容易的理解，下面就一起来主要看position的使用。 第一步：position: static在CSS中所有元素的“position”属性的默认值都是“static”，因为不需要显式的为每个元素设置“position:static”。此时大家会问，那这个属性值是不是没有任何意义呢？其实不是的，他在CSS中也会起着很大的作用。我们来看一个实例： 比如说你的两个页面，同时存在“div#div-1”，那么此时你在A面中需要对“div#div-1”进行绝对定位；而在B页面中“div#div-1”又不需要进行绝对定位。 A页面中“div#div-1”绝对定位：
此时在B页面中不想在进行绝对定位，那么我们就必须在你的样式中显式的重新设置“#div-1”的postion属性为“static”
第二步：相对定位position:relative relative称为相对定位，如果你给某个元素指定了postion的值为“relative”，那么你就可以通过“T-R-B-L”(也就是top,right,bottom,left)来设置元素的定位值。 使用relative时有几点需要注意：
上面三点第一点和第三点来说都是比较好理解，那么现在针对第二点，我们来看一个实例的操作： 在上面的基础上，我们对“div-1”进行向下移动20px；向左移动40px: |
