>

十步图解CSS的position,元素定位

- 编辑:至尊游戏网站 -

十步图解CSS的position,元素定位

十步图解CSS的position

2013/10/12 · CSS · 1 评论 · CSS

最先的小说出处: barelyfitz   译文出处:w3cplus   

CSS的positon,我想做为叁个Web制作者来讲都有相逢过,但关于对其是或不是确实的掌握呢?那本人就不也说了,最少本人本人并不要命的垂询其水源的周转。几近日在Learn CSS Positioning in Ten Steps一文中分十步介绍了CSS的“position”中的“static、relative、absolute、float”使用,感到蛮有趣的。整理了生机勃勃晃贴上来与我们协同共享。希望我们能喜欢。

在图解那十二个经过此前,小编将实例的代码放上来,好让大家一个实体仿效:

HTML Markup

XHTML

<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>

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

简单易行的应用一些体制:

CSS

#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; }

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;
}

千帆竞发效能:

图片 1

为了前边能越来越好的询问相关知识点,小编特将此例的DOM草图画出来:

图片 2

上边包车型客车DOM图,作者想大家自然特别轻易的知道,下边就联合来第大器晚成看position的施用。

  1. position:static|无定位
    position:static是兼具因素定位的暗中认可值, 平时不要注脚,除非有亟待撤除承接的别的定位
    example: #div-1 {
    position:static;
    }
  2. position:relative|相对固定
    动用position:relative,就须求top,bottom,left,right4个属性来同盟,明确因素的职位。
    生龙活虎旦要让div-1层向下活动20px,左移40px:
    example: #div-1 {
    position:relative;
    top:20px;
    left:40px;
    }假诺用到周旋固化,紧随他的层divafter是不会见世在div-1的尘世,而是和div-1在同贰个冲天现身。

第一步:position: static

在CSS中装有因素的“position”属性的默许值都是“static”,因为不要求显式的为各类成分设置“position:static”。此时大家会问,那那么些属性值是或不是从未有过此外意义呢?其实不是的,他在CSS中也会起着相当大的法力。大家来看二个实例:

举个例子你的五个页面,同一时候设有“div#div-1”,那么此时您在A面中要求对“div#div-1”进行相对定位;而在B页面中“div#div-1”又不要求进行相对定位。

A页面中“div#div-1”相对定位:

CSS

#div-1 { position: absolute; }

1
2
3
#div-1 {
position: absolute;
}

此时在B页面中不想在进展相对定位,那么大家就非得在你的样式中显式的复位“#div-1”的postion属性为“static”

CSS

body.B #div-1 { position: static; }

1
2
3
body.B #div-1 {
position: static;
}

 第二步:相对稳固position:relative

relative名字为相对牢固,假诺你给有些成分钦点了postion的值为“relative”,那么你就可以通过“T-LAND-B-L”(也正是top,right,bottom,left)来设置元素的定位值。

使用relative时有几点要求注意:

  1. 要素设置了relative时,是周旋于成分本身地方进行确定地点;
  2. 要素设置了relative后,能够通过“T-奥迪Q5-B-L”更换成分当前所在之处,但成分移位后,相符点有当年的物理空间位;
  3. 要素设置了relative后,若无开展其余的“T-Tiguan-B-L”设置,成分不博览会开别的岗位变动。

地点三点第一点和第三点来讲都以比较好精晓,那么今后本着第二点,大家来看一个实例的操作:

在地点的功底上,大家对“div-1”进行向下活动20px;向左移动40px:

CSS

#div-1 { position:relative; top:20px; left:-40px; }

1
2
3
4
5
#div-1 {
position:relative;
top:20px;
left:-40px;
}

我们来探视效果:

图片 3

从成效图能够重复应验下面说的第二点。成分“div-1”向下移动了20px,向左移动了40px,本人地方变动了,而要素最早所占的大意空间依然照旧存在,别的一些因素相对固定后并未影响别的相邻的要素。

看得出, position:relative;并非很好用。

其三步:相对定位position:absolute

absolute是position中的第二个属性值,假设你给元素钦赐了absolute,整个因素就能够漂出文书档案流,并且成分本人的情理空间也还要未有了。不像“relative”还怀有原先的物理空间。

我们来看三个实例,在div-1a成分上开展相对定位:

CSS

#div-1a { position:absolute; top:0; right:0; width:200px; }

1
2
3
4
5
6
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}

图片 4

那时因素“div-1a”不在当初的文书档案流中,而且其此时一定也是相对于html来扩充稳固,那么大家有时实际不是须求那样的效率,哪果我们成分div-1a还想在div-1是进展相对定位,这要怎么做吧?此时将在发挥前边第二步的“relative”效用了。

  1. position:absolute|相对定位
    动用position:absolute;,能够很正确的将成分移动到您想要的任务,
    让自己将 div-1a 移动到页面包车型大巴右上角:
    example: #div-1a {
    position:absolute;
    top:0;
    right:0;
    width:200px;
    }使用相对化定位的div-1a层后边的照旧后边的层会感到这几个层并不设有,丝毫不影响到他俩。所以position:absolute;用于将四个因素放到一定的岗位很好用,可是如若急需div-1a层相对于相近的层来分明地点就绝不落成了。
    *此间有个Win IE的bug必要提到,正是意气风发旦为绝对定位的因素定义两个绝没有错增幅,那么在IE下它的上涨的幅度决意于父成分的上升的幅度实际不是全部页面包车型大巴上涨的幅度。

  2. position:relative + position:absolute|绝对定位+相对固定

第四步:relative和absolute的结合

其次步中大家精晓元素相对固化“relative”是相对于成分本身定位,而在第三步中山大学家理解元素相对定位“absolute”是相对于html。但这种说法独有知足如此的规格才是例行的:“相对定位成分的别的祖先成分没有打开任何的“relative”大概“absolute”设置,那么相对定位的因素的参照他事他说加以考察物即是html”,那样一来,“relative”和“absolute”的咬合就能够起到比较大的法力。

大家接下去看二个截图:

图片 5

上海教室做为二个实例来证实“relative”和“absolute”的关系,首先上海教室中国共产党有多个div放在body内,况且她们四个div的涉嫌是“div-1>div-2>div-3”,并且在div-3有与此相类似二个纯属定位:

CSS

.div-3 { position: absolute; left:0; top:0; }

1
2
3
4
5
.div-3 {
position: absolute;
left:0;
top:0;
}

上面分多少个情况来证实上图的意趣:

1、div-1与div-2都未有安装“position:relative”,此时大家的div-3相对定位后就漂到了上海教室中“div-3c”的职位上;

2、未来我们在div-2成分中加设置贰个“position: relative”,此时大家的div-3相对定位后就漂到了上图中的“div-3a”的职位;

3、接下去把绝对固化的安装换来div-1元素上,这会儿div-3相对定位后就到了div-3b的岗位。

花那样多激情,笔者只想表达有些:若果二个要素相对定位后,其参照物是以离自个儿近些日子因素是还是不是设置了相对固定,假如有设置将以离自身方今因素定位,若无将往其祖先元素搜索相对固化成分,一贯找到html甘休。那句话谈起起来好像有一些猛烈,不驾驭大家是或不是明白笔者说的是怎样?假使不知晓我们可以参见上海教室恐怕上面这么些实例效果:

重返地点的实例中,即使大家在“div-1”加三个“relative”:

CSS

#div-1 { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; }

1
2
3
4
5
6
7
8
9
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}

几近日大家相对点不在是第三步中的body了,而是“div-1”了,我们看看与第三步的生成:

图片 6

 第五步:relative和absolute实现布局功效

这一步只要想演示一下行使相对固定和相对定位达成的两例布局。在前面包车型大巴根底上,div-1举行相对固化,而div-1a和div-1b进行相对定位,进而实现两列布局的效能:

CSS

#div-1 { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; } #div-1b { position:absolute; top:0; left:0; width:200px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}

图片 7

如此的造作只是用来注解absolute的机能,假如不能不兑现地点的效率,恐怕在骨子里制作中并不周密,为了让其更完备一些,在此个基础上大家在来看下边这一步。

假若给父成分(div-1)定义为position:relative;子元素(div-1a)定义为position:absolute,那么子成分(div-1a)之处将相对于父元素(div-1),并不是成套页面。
让div-1a定位于div-1的右上角:
example: <div id="div-1">
<div id="div-1a">
this is div-1a element.
</div>
this is div-1 element.
</div>#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}

第六步:设置一定中度

为了让布局更适用一些,能够在div-1成分上设置一定高度,如:

CSS

#div-1 { position:relative; height:250px; } #div-1a { position:absolute; top:0; right:0; width:200px; } #div-1b { position:absolute; top:0; left:0; width:200px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#div-1 {
position:relative;
height:250px;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}

图片 8

相比好一些,但大家并不知道成分内容中度将会是不怎么,所以在此设置二个原则性中度也是大家实际中的叁个死穴,个人不提出如此使用。假若为了索要,大家得以通过其余方法来贯彻。

  1. two column layout|两列布局
    让我们实行position:relative + position:absolute的辩白,达成两列布局。
    example: <div id="div-1">
    <div id="div-1a">this is the column-one</div>
    <div id="div-1b">this is the column-two</div>
    </div>#div-1 {
    position:relative;/*父成分相对固化*/
    }
    #div-1a {
    position:absolute;/*子成分绝对定位*/
    top:0;
    right:0;
    width:200px;
    }
    #div-1b {
    position:absolute;/*子成分相对定位*/
    top:0;
    left:0;
    width:200px;
    }注意,在这里个事例中会发掘夫成分的告诉不会趁机子成分的告知变化,所以要是父成分的背景和边框要求定义八个足足高的惊人才干显得出来。

第七步:float

前两步,使用相对化定位都并非很完美,那么大家能够设想动用float来消除。大家能够在三个成分上利用float,让要素向左或向右,况兼还能使用文本围绕在这里个元素的常见(这么些效果在文件围绕图片极度实用)。下边来效仿一下:

CSS

#div-1a { float:left; width:200px; }

1
2
3
4
#div-1a {
float:left;
width:200px;
}

图片 9

6.float|调换对齐
应用float定位二个要素有float:left;&float:right;三种值。这种牢固只好在档次坐标定位,不能够在笔直坐标定位。何况让上边包车型地铁因素浮动环绕在它的左臂或许右侧。
example: #div-1a {
float:left;
width:200px;
}
7.make two clumn with float|浮动实现两列布局
即使让八个要素float:left;另一个float:right;调节好他们的宽度,就会达成两列的布局功效。
example: #div-1a {
float:left;
width:150px;
}
#div-1b {
float:left;
width:150px;
}
8.clear float|拔除浮动
假设您不想让动用了float元素的上边的要素浮动环绕在它的方圆,那么您就选择clear,clear有四个值,clear:left;(扫除左浮动),clear:right;(排除右浮动),clear:both;(杀绝全数变化)。
example: <div id="div-1a">this is div-1a</div>
<div id="div-1b">this is div-1b</div>
<div id="div-1c">this is div-1c</div>#div-1a {
float:left;
width:190px;
}
#div-1b {
float:left;
width:190px;
}
#div-1c {
clear:both;
}

第八步:多列浮动

地点呈现的是三个列浮动,接下去看看多列的浮动:

CSS

#div-1a { float:left; width:150px; } #div-1b { float:left; width:150px; }

1
2
3
4
5
6
7
8
#div-1a {
float:left;
width:150px;
}
#div-1b {
float:left;
width:150px;
}

图片 10

变动与相对定位来比较,未来缓慢解决了其惊人自适应的题目,但也存在叁个难点,浮动也破坏了成分当初的文档流,使其父成分塌陷了,那么为了消除那么些标题,大家有必不可缺对其展开祛除浮动。

第九步:撤消浮动

为了让变化成分的父成分不在处于塌陷状态下,我们须求对转移成分举行杀绝浮动:

CSS

#div-1a { float:left; width:190px; } #div-1b { float:left; width:190px; } #div-1c { clear:both; }

1
2
3
4
5
6
7
8
9
10
11
#div-1a {
float:left;
width:190px;
}
#div-1b {
float:left;
width:190px;
}
#div-1c {
clear:both;
}

图片 11

变动是在css中是二个很深的课题,这里只是轻描淡写了生龙活虎晃。前边在《CSS的Float之一》和《CSS的Float之二》也介绍了大器晚成都部队分有关于float的连锁知识,有有关消亡浮动的,大家也足以点阅《Clear Float》。

第十步:扩大阅读

下面只是简短的牵线了一下CSS中的position的基础知识。若是大家对这一块知识感兴趣的话,可以点击上边包车型大巴连带连接:

  1. The position declaration
  2. Absolute Positioning Inside Relative Positioning
  3. CSS Positioning 101
  4. Css position: position static, absolute, relative and fixed of an element
  5. Making the absolute, relative
  6. floatutorial
  7. CSS Floats 101
  8. All About Floats
  9. float

 

 

 

 

 

赞 2 收藏 1 评论

图片 12

本文由IT-综合发布,转载请注明来源:十步图解CSS的position,元素定位