十步图解CSS的position,CSS布局模型
分类:前端技术

十步图解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”使用,感觉挺有趣的。收拾了生机勃勃晃贴上来与大家一块儿享受。希望我们能欢乐。

在图解这12个经过在此之前,小编将实例的代码放上来,好让我们一个实体参照他事他说加以考查:

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&containing block,positionfixed

CSS富含3种为主的布局模型,用拉脱维亚语回顾为:Flow、Layer 和 Float。

第一步: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-哈弗-B-L”(也正是top,right,bottom,left)来设置成分的定位值。

利用relative时有几点须求小心:

  1. 要素设置了relative时,是对峙于成分本人地方举办定点;
  2. 要素设置了relative后,能够透过“T-CR-V-B-L”更改成分当前所在的职责,但成分移位后,相像点有当年的物理空间位;
  3. 要素设置了relative后,若无进展别的的“T-奔驰G级-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;实际不是很好用。

一、包含块(Containing Block)

要讲position,首先就事关到一个定义:蕴含块。

1. 流动模型(Flow)

先来讲一说流动模型,流动(Flow)是暗许的网页布局格局。也正是说网页在暗中同意状态下的 HTML 网页元素都以基于流动模型来分布网页内容的。
流动布局模型具备2个相比较独立的特色:
先是点,块状成分都会在所处的带有元素内自上而下按梯次垂直延伸遍布,因为在默许状态下,块探花素的幅度都为百分之百。实际上,块状成分都会以行的款式挤占地点。如(div,h1,p)宽度展现为百分之百。
其次点,在流动模型下,内联成分都会在所处的隐含成分内从左到右水平分布显示。(内联成分可不像块状成分这么心如铁石独自占领大器晚成行)成分标签a、span、em、strong都以内联成分。

其三步:相对定位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|相对定位 相对稳固

1、包涵块介绍

带有块轻松驾驭正是三个恒定参照他事他说加以考查块,正是大盒子里套小盒子中非常大盒子。成分有positon属性就必定关联到含有块。先轻易计算一下。

1、发轫富含块(Initial containing block),即根成分的包括框。 在浏览器中是原点与 canvas 原点重合、大小与 viewport 雷同的矩形。

2、position:static|relative成分满含块为近些日子的块级【block|list-item|table】父成分的内容框

3、positon:先找absolute近日已定位祖先成分【没有的话富含块便是从头包涵块】

  • 举个例子祖先成分是块级成分,则带有块是古人成分的padding框。
  • 假如祖先成分是内联元素,满含块决计于祖先成分的direction属性
    • dirrection:ltr,祖先成分的第一个盒子的上、左padding框边界是富含块的上和左,祖先成分最终二个盒子的下、右padding边界是带有块的下和右。
    • direction:rtl,祖先成分第3个盒子的上、右padding框边界是含有块的上右,祖先成分最终七个要素的下、左padding框边界是包罗块的下、左。

4、positon:fixed成分的蕴含块是由viewport决定的,和根成分毫无干系。

2. 变迁模型 (Float)

块探花素这么心如铁石都是总揽风华正茂行,若是未来大家想让多少个块状成分并排展现,如何是好吧?不要心急,设置成分浮动就可以完结这一意思。
其余因素在暗中认可情状下是不可能变化的,但足以用 CSS 定义为浮动,如 div、p、table、img 等因素都能够被定义为转移。如下代码能够兑现多少个 div 元素黄金年代行展现。

div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>

第四步: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的任务。

花这么多心情,小编只想证贝因美(Karicare)(Aptamil)些:假诺三个成分相对定位后,其参照物是以离作者近期因素是不是设置了相对稳固,如若有设置将以离自个儿多年来成分定位,若无将往其祖先成分寻觅相对稳固成分,一贯找到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;
}

2、static和满含块

比喻:未有设置postion,所以标签position都以暗中认可的static。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>包含块 by starof</title>
</head>
<body>
    <div id="div1">
        <p id="p1">第一段内容</p>
        <p id="p2">
            这些文字是
            <em id="em1">第 <strong id="strong1">二</strong>段</em> 
            内容
        </p>
    </div>
</body>
</html>

发生盒子的成分——》包括块

body——》initial C.B.(UA-dependent)

div1——》body

p1——》div1

p2——》div1

em1——》p2

strong1——》p2

3. 层模型(Layer)

怎样是层布局模型?层布局模型就像图像软件PhotoShop中国和欧洲常流行的图层编辑作用相近,各种图层可以正分明位操作,但在网页设计领域,由于网页大小的活动性,层布局未能受到热捧。可是在网页上一些使用层布局依然有其方便人民群众之处的。下边大家来读书一下html中的层布局。
哪些让html元素在网页中正分明位,就如图像软件PhotoShop中的图层相通可以对各类图层能够准确定位操作。CSS定义了大器晚成组定位(positioning)属性来支撑层布局模型。

层模型有三种格局:

第六步:设置一定中度

为了让布局更适用一些,能够在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;
    }注意,在这里个事例中会开采夫成分的告诉不会趁机子成分的告诉变化,所以如若父成分的背景和边框须要定义贰个足足高的万丈技巧显得出来。

3、absolute和带有块

譬喻来讲:direction:ltr,尊崇块的顶,左是祖元夜素生成的率先个框的padding 框,右下同理。

<p style="border:1px solid red; width:200px; padding:20px;">
    TTT

        这段文字从左向右排列,红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素,它的包含块是相对定位的SPAN。
 可以通过它们绝对定位的位置来判断它们包含块的边缘。 <em style="position:absolute; color:red; top:0; left:0;">XX</em> <em style="position:absolute; color:yellow; top:20px; left:0;">XX</em>
        <em style="position:absolute; color:blue; bottom:0; right:0;">XX</em>

</p>

图片 9

包涵块的宽窄可认为负,行内元素的首先个框的胚胎位置位于最后七个框甘休地点的侧面,这个时候富含块为负值。

譬释迦牟尼佛讲:direction:rtl,珍贵块的顶,右是祖元宵素第二个框的顶,右padding框,下左同理。

图片 10<p style="border:1px solid red; width:200px; padding:20px; direction:rtl;"> T <span style="background-color:#C0C0C0; position:relative;padding:10px;"> 这段文字从右向左排列,红 XX 和 蓝 XX 和黄 XX 都以纯属定位成分,它的包蕴块是相持固定的SPAN。 能够通过它们相对定位之处来判别它们 <em style="position:absolute; color:red; top:0; left:0;">XX</em> <em style="position:absolute; color:yellow; top:20px; left:0;">XX</em> <em style="position:absolute; color:blue; bottom:0; right:0;">XX</em> </span> </p> View Code

图片 11

其余情况绝对简便易行,不做牵线。接下来是position各取值细节。

1、相对定位(position: absolute)

如若想为成分设置层模型中的相对定位,需求设置position:absolute(表示相对定位),那条语句的作用将元素从文书档案流中拖出来,然后采纳left、right、top、bottom属性相对于其最周围的一个怀有固定属性的父蕴涵块举办相对定位。假使不真实此样的包括块,则相对于body成分,即相对于浏览器窗口。
如上边代码能够完成div成分相对于浏览器窗口向右移动100px,向下活动50px。

div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;}
<div id="div1"></div>

第七步:float

前两步,使用相对化定位都并非很精美,那么大家可以设想使用float来减轻。大家得以在三个元素上应用float,让要素向左或向右,並且还足以选择文本围绕在这里个因素的广阔(那些功能在文件围绕图片极其有效)。上面来模拟一下:

CSS

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

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

图片 12

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

二、position:static

static是暗中认可值,表示成分未有别"positioned",position此外值表示成分被"positioned"。所以"已定位元素"表示的就是设置position属性为除static之外的值的成分。position:static成分的布局就是根据盒子模型在通常流中来布局。

使用:

诚如不要呈现钦点,除非想要覆盖此前安装的稳固,让要素回归到平常流。

2、相对固定(position: relative)

假设想为成分设置层模型中的相对固定,必要设置position:relative(表示相对牢固),它通过left、right、top、bottom属性分明因素在平常文书档案流中的偏移地点。绝对牢固实现的进度是率先按static(float)方式生成四个成分(而且成分像层雷同改变了起来),然后相对于早先的地点移动,移动的方向和幅度由left、right、top、bottom属性鲜明,偏移前的职责保留不动。
平日来讲代码实现相对于早前地点向下活动50px,向右移动100px;

#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}<div id="div1"></div>

第八步:多列浮动

上面呈现的是贰个列浮动,接下去看看多列的变动:

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

图片 13

变化与相对定位来对比,今后减轻了当中度自适应的主题材料,但也存在三个标题,浮动也破坏了成分当初的文档流,使其父成分塌陷了,那么为了消除那么些主题材料,我们有不可贫乏对其进展消逝浮动。

三、position:relative

relative表现和static同样,除非增加了top|right|bottom|left属性。//lxy可以精晓为relative是从static到absolute的二个接通性质状态。就如在inline和block中间过渡有三个inline-block。

相持固定成分属性设置top|right|bottom|left偏离平常职责后,别的因素不会调动岗位来弥补偏离后余下的半空中。也足以领略为仍旧占领原本空间,所以不影响别的因素布局,大概会覆盖别的成分。

总结:relative成分依然处在正常流,且不更动display属性,或许会覆盖页面别的因素。

举例:

<style>
div{
    display: inline-block;
}
.red{
    width: 100px;
    height: 100px;
    border:1px solid red;
    position: relative;
    background-color: yellow;
}
.green{
    width: 100px;
    height: 100px;
    border:1px solid green;
}
/*.left{
    left: -50px;
}*/
</style>
<body>
    <div class="red left">第一个元素</div>
    <div class="green">第二个元素</div>
    <div class="red left">第三个元素</div>
</body>

裁撤注释查看设置偏移后的自己检查自纠效果:

图片 14

3、固定定位(position: fixed)

fixed:表示固定定位,与absolute定位类型相似,但它的相持移动的坐标是视图(荧屏内的网页窗口)本人。由于视图自身是原则性的,它不会随浏览器窗口的滚动条滚动而改动,除非你在显示屏中活动浏览器窗口的显示屏地点,或退换浏览器窗口的呈现大小,因而一定定位的因素会始终位于浏览器窗口内视图的有些地方,不会受文书档案流动影响,那与background-attachment:fixed;属性功用相符。以下代码能够兑现相对于浏览器视图向右移动100px,向下移动50px。而且拖动滚动条时地点一定不改变。

#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>

选取position:absolute能够兑现被设置成分相对于浏览器(body)设置一定之后,我们有未有想过行不行相对于其余成分进行定位呢?答案是必定的,当然能够。使用position:relative来帮忙,可是必需信守上边标准:
1、参照定位的元素必得是相对固定成分的长辈成分:

<div id="box1">
<div id="box2">相对参照成分进行定点</div>
</div>

从地点代码能够看见box1是box2的父成分(父成分当然也是长辈成分了)。
2、参照定位的因素必须参预position:relative;

#box1{
width:200px;
height:200px;
position:relative;
}

3、定位元素参与position:absolute,便得以利用top、bottom、left、right来开展偏移定位了。

#box2{

position:absolute;
top:20px;
left:30px;         

}

如此box2就足以相对于父成分box1一定了(这里注意参照物就能够不是浏览器了,而得以轻松设置了)。

第九步:消释浮动

为了让变化成分的父成分不在处于塌陷状态下,我们须要对转移成分进行破除浮动:

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

图片 15

更动是在css中是一个很深的课题,这里只是浮光掠影了瞬间。前边在《CSS的Float之一》和《CSS的Float之二》也介绍了一些有关于float的连锁知识,有有关驱除浮动的,我们也足以点阅《Clear Float》。

四、position:absolute

position:absolute相对于近日的"positioned" 祖先成分定位。若无“positioned”祖先成分,那么它是相持于文书档案的 body 成分,况兼它会趁机页面滚动而移动。

纯属定位成分的永久值产生冲突时的消除措施:

  • 若果同期钦点 top 和 bottom(非 auto),优先选择 top
  • 纵然同时钦点 left 和 right,若 direction 为 ltr(爱沙尼亚语、中文等),则优先利用 left;若 direction 为 rtl(马耳他语、俄语等),则先行利用right

总计几点:

position:absolute和margin,padding都不冲突,可同期生效。

position:absolute会退换display值,所以会发出包裹性。

position:absolute的因素脱离平常流。所以会产生破坏性。

position:absolute存在时【不加top,right,bottom,left】,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 评论

图片 16

1、包裹性

安装了position:absolute的因素,其尺寸会减弱刚好容纳内容。

因为position:absolute会改革成分的display属性【形似浮动】,inline产生block,举例上面例子。

<style>
.container{
    border: 1px solid green;
    padding: 30px;
    background-color: green;
    background-clip: content-box;/*将背景裁剪到内容框,方便看绝对定位元素效果*/
    position: absolute;
}
</style>
<div class="container">内容</div>

图片 17

块状成分设置position:absolute后,chrome下top,right,bottom,left变为auto,而ff下直接是计量出的肥瘦。

2、破坏性

举个例子:子成分absolute,父成分中度塌陷。

<style>
.father{
border:1px solid red;
}
.son{
background-color: green;
position: absolute;
/*float: left;*/
}
</style>
</head>
<body>
    <div class="father">
        <div class="son" >元素内容</div>
    </div>
</body>

图片 18

规律:和float相符,position:absolute让要素脱离符合规律流,而父成分还在健康流中,它们曾经是多少个世界的东东了,自然撑不起父成分中度。

Note:设置position:absolute后再设置float:left不奏效,且最后计算的float值照旧none实际不是设置的值。

3、不受relative控制的position:absolute举例

不利用top,right,bottom,left中任何壹性情情恐怕选择auto作为值。

相仿都以用absolute加margin调度地方。

比如:hot图片始终在求课文字右上角。

图片 19<style type="text/css"> .icon-hot { position: absolute; width: 28px; height: 11px; margin: -6px 0 0 2px; background-color: red; background: url(img/new.jpg); } </style> <body> <h3> <a href="#"> 新项目 <i class="icon-hot"></i> </a> </h3> <a href="#">新项目</a><img src="img/new.jpg" style="margin-bottom:15px;"> </body> View Code

图片 20

浅析:因为position:absolute让<i>标签的display值从inline形成block,所以能够安装宽高。通过margin调治地方。

看似例子:

图片 21<!doctype html> <html> <head> <meta charset="utf-8"> <title>Logo定位二三事</title> <style> body { font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; } body, h3, h5 { margin: 0; } img { border: 0 none; vertical-align: bottom; } .l { float: left; }.r { float: right; } .constr { width: 1200px; margin-left: auto; margin-right: auto; } .course { padding-top: 10px; } .course-list { float: left; width: 280px; height: 240px; margin: 5px 10px 15px; border-radius: 0 0 1px 1px; background-color: #F7FAF9; background-color: rgba(255,255,255,1); box-shadow: 0 1px 2px #c5c5c5; text-decoration: none; } .course-list-img { background-color: #6396F1; } .course-list-h { line-height: 50px; font-size: 14px; font-weight: 400; color: #363d40; text-align: center; } .course-list-tips { margin: 0 14px; font-size: 12px; color: #b4bbbf; overflow: hidden; } .icon-recom { position: absolute; line-height: 20px; padding: 0 5px; background-color: #f60; color: #fff; font-size: 12px; } .icon-vip { position: absolute; width: 36px; height: 36px; margin-left: -36px; background: url(); text-indent: -9em; overflow: hidden; } </style> </head> <body> <div class="main"> <div class="constr"> <div class="course"> <a href="" class="course-list"> <div class="course-list-img"> <span class="icon-recom">推荐</span> <img width="280" height="160" alt="共享:CSS深远领悟之float浮动" src=" --><i class="icon-vip">vip</i> </div> <h5 class="course-list-h">分享:CSS深切领会之float浮动</h5> <div class="course-list-tips"> <span class="l">已实现</span> <span class="r">3513位学习</span> </div> </a> </div> </div> </div> </body> </html> View Code

图片 22

4、无一定宽高容器内相对定位成分拉伸

比方:完毕遮罩效果

图片 23<style> body { background-color: #ddd; } img { vertical-align: bottom; } .container { display: inline-block; position: relative; } .cover { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: blue; opacity: .5; filter: alpha(opacity=50); } </style> <body> <span class="container"> <i class="cover"></i> <img src="img/wb.jpg"> </span> </body> View Code

图片 24

同样的规律完结:全屏自适应遮罩层效果,切加上margin:auto可完毕程度且直居中。

图片 25<!doctype html> <html> <head> <meta charset="utf-8"> <title>未有小幅度和可观注明完成的全屏自适应效果by starof</title> <style> html, body { height: 百分百; } .overlay { display: none; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); } .content { position: absolute; width: 300px; height: 200px; margin: auto; left: 0; top: 0; right: 0; bottom: 0; background-color: #fff; } </style> </head> <body> <div class="overlay" id="overlay"> <div class="content"> 弹出层内容 <a href="javascript:void(0);" id="close">关闭</a> </div> </div> <a href="javascript:void(0);" id="open">打开</a> <script> var openA=document.getElementById("open"); var overlay=document.getElementById("overlay"); var closeA=document.getElementById("close"); openA.onclick=function(){ overlay.style.display="block"; } closeA.onclick=function(){ overlay.style.display="none"; } </script> </body> </html> View Code

图片 26

五、position:fixed

fixed是absolute的特例,相对于视窗来恒定,所以页面滚动它照旧停靠在相对地点。

之所以fixed也会变动成分的display属性,会让要素脱离平常流。

六、position和float的关系

1、position:static;position:relative和float属性可共存。

3、同有的时候间设置position:absolute和float,float无效。

4、设置position:absolute的成分大概会覆盖float元素。

举例:

图片 27<style> .float{ width: 300px; height: 150px; background: green; } .abs{ width: 150px; background-color: red; position: absolute; top:50px; } </style> </head> <body> <div class="float">小编是float:left的DIV</div> <div class="abs">我是二个运用了position:absolute的DIV。</div> </body> View Code

图片 28

为啥相对定位成分大概会覆盖转换元素,因为浏览器渲染的时候同样堆集上下文中,先渲染非固定元素,再渲染浮动成分,最后渲染已稳固成分。

关键难点是,那个时候安装float成分的z-index来蒙蔽absolute无效。因为z-index值只适用于已经牢固的元素(即position:relative/absolute/fixed),对转移成分不起作用的。

可将float成分的position属性值设置为relative,然后设置z-index。因为已稳定成分而且z-index不是默许的auto的话会变动多少个新的堆积上下文。

风流罗曼蒂克经地方说的还不是很懂,恐怕想更浓重摸底z-index原理,可参看:z-index堆积法规

七、财富链接

8 Box model

9 Visual formatting model

中文版CSS2/visuren

中文版CSS2/visudet/zh-hans

KB012: 相对定位( Absolute positioning )

 

正文我starof,因知识本身在转移,小编也在时时随地学习成长,小说内容也不安时更新,为幸免误导读者,方便推本溯源,请各位转载证明出处:

 

block,positionfixed 意气风发、富含块(Containing Block) 要讲position,首先就涉及到一个定义:富含块。 1、包括块介绍 包涵块轻易理解便是...

本文由pc28.am发布于前端技术,转载请注明出处:十步图解CSS的position,CSS布局模型

上一篇:给初读书人的二十一个CSS实用建议,媒体类型 下一篇:没有了
猜你喜欢
热门排行
精彩图文