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

十步图解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的使用。

position&containing block,positionfixed

[十步图解CSS的position,CSS元素定位6。CSS]变动的那一点事情,css浮动事儿

《精通CSS.DIV网页样式与布局》视频6-10课统计图:

第一步: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-R-B-L”(也就是top,right,bottom,left)来安装元素的定位值。

利用relative时有几点要求专注:

  1. 要素设置了relative时,是周旋于元素本身地方展开稳定;
  2. 要素设置了relative后,能够经过“T-R-B-L”改变元素当前所在的岗位,但元素移位后,同样点有当年的物理空间位;
  3. 要素设置了relative后,如若没有展开任何的“T-R-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,本身地点变动了,而要素最初所占的物理空间依旧依然存在,别的一些元素相对固化后并没有影响其余相邻的因素。

一、包含块(Containing Block)

要讲position,首先就涉及到一个定义:包罗块。

要素是什么样变化

要素的档次方向转变,意味着元素只好左右运动而无法上下移动。

一个生成元素会尽量向左或向右移动,直到它的异乡缘碰到含有框或另一个浮动框的边框截至。

变更元素之后的要素将围绕它。

扭转元素此前的因素将不会惨遭震慑。

 

正文

转变是一种半脱离文档流的动静,他不像相对定位这样完全退出文档流

  相对定位:

  <div id=”div1″
style=”position:relative;width:200px;background-color:red”>
    <div id=”div2″
style=”position:absolute;top:0;left:0;width:100px;height:100px;background-color:blue”></div>
  <div>

  亚洲必赢官网 4

  此时div1没有安装中度,就算在div2中安装了冲天100px,可是div2是撑不开div1的莫大的,因为相对定位完全剥离文档流,div1是全然感受不到div2的;

 

变迁:第一种状态 

  <div id=”div1″ style=”margin:20px
0;width:200px;background-color:red”>
    <div id=”div2″
style=”float:left;width:100px;height:100px;background-color:blue”></div>
  </div>

  亚洲必赢官网 5

  大家在div2中设置了向左浮动,如若你没有在div1中革除div2浮动带来的熏陶,那么你也是无力回天撑开div1的万丈的,因为div1感受不到浮动.

  可是当您拨冗了变通之后,div1就能感受到变化的存在了(相当于浮动现在是在文档流中),中度就会撑开。

  那里有二种缓解方法

  亚洲必赢官网 6

  亚洲必赢官网 7

 

变迁:第几种情形

  <p>神经病阳癫疯</p>
  <div id=”div2″
style=”float:left;width:100px;height:100px;background-color:red;”></div>

  亚洲必赢官网 8

  因为变化(div2)能感受获得那里的<p>,所以该怎么显得就怎么显得;即扭转元素以前的因素将不会受到震慑。

  

 

变化:第三种情况

  <div id=”div2″
style=”float:left;width:100px;height:100px;border:3px solid
#F00″></div>
  <p style=”background-color:blue”;>神经病阳癫疯</p>

  亚洲必赢官网 9

  <p>是感受不到变化(div2)的留存的,那么<p>是会被转移覆盖的,但是她又不是一心被掩盖。

  大家得以窥见<p>的背景确实是被掩盖了,不过<p>的文本内容并未被遮住,那也是生成的一个奇怪的地点——浮动不会覆盖文档流汉语本,可是任何属性会覆盖。

  解决格局

    给<p>设置一个clear:left; 清除浮动的熏陶,让<p>能感受的到(div2)的存在。

  <div id=”div2″
style=”float:left;width:100px;height:100px;border:3px solid
#F00″></div>
  <p
style=”clear:left;background-color:blue”;>神经病阳癫疯</p>

  亚洲必赢官网 10

元素是何等变化
元素的水准方向转变,意味着元素只好左右移动而无法上下运动。
一个变动元素会尽量…

亚洲必赢官网 11

其三步:绝对定位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;
}

亚洲必赢官网 12

那时候元素“div-1a”不在当初的文档流中,而且其此时稳定也是争执于html来举行固化,那么大家有时并不是索要这么的听从,哪果大家元素div-1a还想在div-1是开展绝对定位,那要怎么办呢?此时就要发挥前边第二步的“relative”作用了。

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,祖先元素首个盒子的上、右padding框边界是带有块的上右,祖先元素最后一个元素的下、左padding框边界是富含块的下、左。

4、positon:fixed元素的包括块是由viewport决定的,和根元素非亲非故。

 

第四步:relative和absolute的结合

第二步中大家精通元素相对固化“relative”是相对于元素自身定位,而在第三步中大家精晓元素相对定位“absolute”是相对于html。但那种说法唯有知足如此的准绳才是正常的:“纯属定位元素的其它祖先元素没有举行任何的“relative”或者“absolute”设置,那么相对定位的因素的参考物就是html”,这样一来,“relative”和“absolute”的重组就能起到很大的法力。

大家接下去看一个截图:

亚洲必赢官网 13

上图做为一个实例来证实“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的任务。

花这么多心情,我只想证诺优能(Nutrilon)些:若是一个因素相对定位后,其参照物是以离我近日元素是或不是设置了针锋相对稳定,倘若有设置将以离自己多年来因素定位,如果没有将往其祖先元素寻找相对稳定元素,一直找到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”了,大家看看与第三步的生成:

亚洲必赢官网 14

 第五步: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;
}

亚洲必赢官网 15

如此那般的创建只是用来验证absolute的法力,即使不得不促成地方的机能,可能在其实制作中并不周到,为了让其更完美一些,在那个基础上大家在来看下边这一步。

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

 

第六步:设置一定高度

为了让布局更适用一些,可以在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;
}

亚洲必赢官网 16

比较好一些,但大家并不知道元素内容中度将会是多少,所以在此设置一个原则性中度也是大家其实中的一个死穴,个人不指出如此使用。要是为了要求,大家可以透过其余格局来落成。

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>

亚洲必赢官网 17

包罗块的增幅可以为负,行内元素的首个框的胚胎地方放在末了一个框截止地点的左侧,那时包括块为负值。

举例来说:direction:rtl,珍惜块的顶,右是先人元素首个框的顶,右padding框,下左同理。

亚洲必赢官网 18<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

亚洲必赢官网 19

其余景况绝对不难,不做牵线。接下来是position各取值细节。

 

第七步:float

前两步,使用相对化定位都并不是很理想,那么大家可以设想使用float来化解。大家得以在一个元素上运用float,让要素向左或向右,而且仍是可以动用文本围绕在这么些元素的广大(这么些功能在文件围绕图片越发有效)。上边来效仿一下:

CSS

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

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

亚洲必赢官网 20

二、position:static

static是默许值,表示元素没有别”positioned”,position此外值表示元素被”positioned”。所以”已稳定元素”表示的就是设置position属性为除static之外的值的要素。position:static元素的布局就是坚守盒子模型在正常流中来布局。

使用:

诚如不要呈现指定,除非想要覆盖之前安装的定位,让要素回归到正常流。

要素定位

第八步:多列浮动

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

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

亚洲必赢官网 21

扭转与相对定位来对待,现在缓解了其惊人自适应的标题,但也存在一个难题,浮动也毁掉了元素当初的文档流,使其父元素塌陷了,那么为了化解这一个题目,我们有必不可少对其展开割除浮动。

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

撤回注释查看设置偏移后的对待效果:

亚洲必赢官网 22

(1)float:left/right;

第九步:清除浮动

为了让变化元素的父元素不在处于塌陷状态下,大家必要对转移元素举办割除浮动:

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

亚洲必赢官网 23

变迁是在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不起作用,所以可以用来去变通。

左浮动;脱离普通文档流向左浮动(即向左对齐);float属性必须利用在块级元素上,也就是说浮动并不使用于行内元素,或者说当应用了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
评论

亚洲必赢官网 24

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>

亚洲必赢官网 25

块探花素设置position:absolute后,chrome下top,right,bottom,left变为auto,而ff下直接是一个钱打二十四个结出的大幅度。

貌似页面排版时大的div块都会用到float:left/right;来展开排版,可是处于页面底端的脚本div块一般都会使用clear:both;来消除浮动影响。

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>

亚洲必赢官网 26

规律:和float一样,position:absolute让要素脱离正常流,而父元素还在正规流中,它们曾经是五个世界的东东了,自然撑不起父元素中度。

Note:设置position:absolute后再安装float:left不奏效,且最终统计的float值如故none而不是设置的值。

例如:

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

不行使top,right,bottom,left中别的一个质量或者选择auto作为值。

貌似都是用absolute加margin调整岗位。

举例来说:hot图片始终在求课文字右上角。

亚洲必赢官网 27<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

亚洲必赢官网 28

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

看似例子:

亚洲必赢官网 29<亚洲必赢官网 ,!doctype
html> <html> <head> <meta charset=”utf-8″>
<title>图标定位二三事</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”>3514人学习</span> </div> </a>
</div> </div> </div> </body> </html> View Code

亚洲必赢官网 30

页面已用div分好块:#container、#banner、#content、#links、#footer(#container中隐含其他div块)如下图:

4、无一定宽高容器内绝对定位元素拉伸

举例来说:已毕遮罩效果

亚洲必赢官网 31<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

亚洲必赢官网 32

一样的原理落成:全屏自适应遮罩层效果,切加上margin:auto可已毕程度且直居中。

亚洲必赢官网 33<!doctype
html> <html> <head> <meta charset=”utf-8″>
<title>没有大幅度和冲天申明达成的全屏自适应效果by
starof</title> <style> html, body { height: 100%; } .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

亚洲必赢官网 34

亚洲必赢官网 35

五、position:fixed

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

从而fixed也会转移元素的display属性,会让要素脱离正常流。

若要将页面排版如下,怎么着用CSS设置?

六、position和float的关系

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

3、同时安装position:absolute和float,float无效。

4、设置position:absolute的因素可能会覆盖float元素。

举例:

亚洲必赢官网 36<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

亚洲必赢官网 37

何以相对定位元素可能会覆盖转变元素,因为浏览器渲染的时候同样堆叠上下文中,先渲染非固定元素,再渲染浮动元素,最终渲染已定位元素。

关键难点是,此时设置float元素的z-index来覆盖absolute无效。因为z-index值只适用于已经固定的因素(即position:relative/absolute/fixed),对转移元素不起作用的。

可将float元素的position属性值设置为relative,然后设置z-index。因为已稳定元素并且z-index不是默许的auto的话会变动一个新的堆叠上下文。

即使下面说的还不是很懂,或者想更长远摸底z-index原理,可参看:z-index堆叠规则

亚洲必赢官网 38

七、资源链接

8 Box model

9 Visual formatting model

中文版CSS2/visuren

中文版CSS2/visudet/zh-hans

KB012: 相对定位( Absolute positioning )

 

正文小编starof,因知识本身在变更,笔者也在频频学习成长,小说内容也不安时更新,为防止误导读者,方便追根溯源,请各位转载声明出处:

 

block,positionfixed
一、包含块(Containing Block) 要讲position,首先就涉嫌到一个定义:包涵块。
1、包蕴块介绍 包括块不难明了就是…

——>>元素定位如下:注意float的应用

亚洲必赢官网 39

 

(2)position:absolute/relative;

CSS定位的原理

把浏览器窗口想象成一个坐标序列:

CSS定位的规律是:你能够将其他盒子(box)放置在坐标种类的任何职责上。

运用CSS定位技术来放置元素是相当标准的。相对于选取表格、透明图像或其它艺术而言,CSS定位要简明得多。

纯属定位

一个应用相对定位的要素不获取其他空间。那意味着:该因素在被一定后不会留给空位。

要对元素举行相对定位,应将position属性的值设为absolute。接着,你可以因而质量left、right、top和bottom来设定将盒子放置在何地。

举个相对定位的例证,倘若我们要在文档的三个角落各放置一个盒子:

#box1
{ position:absolute; top: 50px; left: 50px;}#box2 { position:absolute; top: 50px; right: 50px;}#box3
{ position:absolute; bottom: 50px; right: 50px;}#box4
{ position:absolute; bottom: 50px; left: 50px;}

相对固化

要对元素举办相对固化,应将position属性的值设为relative。相对定位与相对固定的区分在于总计地方的艺术。

行使相对固化的因素,其地方是相对于它在文档中的原始地点总结而来的。那意味,相对固化是通过将元素从原先的地点向右、向左、向上或向下移动来稳定的。选取相对固化的元素会博得对应的半空中。

举个相对稳定的例子,大家可以相对于三张图纸在页面上的固有地方来对它们进行相对固定。注意这个图片将在文档中分其余本来面目地点处留下空位。

#dog1 {
position:relative; left: 350px; bottom: 150px;}#dog2 {
position:relative; left: 150px; bottom: 500px;}#dog3 {
position:relative; left: 50px; bottom: 700px;}css里的position的值relative、absolute的实际意义

position属性其实是指本体对上面的定点。默许的属性值都是static,静态。

最首要的是relative(相对)以及absolute(相对)。

 

如:

<div
id=”A”>

    
<div id=”B”>

     
</div>

</div>

 

当A的position为relative时,B的position为absolute才有效。那时候left:0、top:0就不再针对窗口文档,而是针对id为A的那个div了。

position:absolute:
相对定位,是参考浏览器的左上角,协作TOP、RIGHT、BOTTOM、LEFT(上边简称TRBL)进行定位,在没有设定TRBL,默许依据父级的坐标原始点为原始点。假诺设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点举行稳定,地方将由TRBL决定。

 

position:relative:
相对固定,是参考父级的原始点为原始点,无父级则以BODY的原始点为原始点,同盟TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点举办固定。

只顾:相对在无父级时以BODY为原始点,而相对是以浏览器最左上角为原始点.

下边实例证实地方那句话:

<style>

#wrap{

width:500px;

background-color: red;

height:auto;

}

#column1{

position:absolute;

top:0px;

left:0px;

width:300px;

background-color: green;

}

#column2{

position:relative;

top:0px;

left:0px;

width:470px;

background-color: #FFFF66;

}

</style>

<body
style=”border:4px blue dotted”> /*此地自己用框框出来,好辨认*/

<div
id=”wrap”> 

<div
id=”column1″>那里是率先列</div>

   <div
id=”column2″>那里是第二列</div>

</div>

</body>

兑现效益:

亚洲必赢官网 40

3,

z-index属性:

(1)设置元素的堆叠顺序,拥有更高堆叠顺序的要素总会处于堆叠顺序较低的元素的面前,即,z-index的值越小则所处堆叠地点越低

(2)z-index可有负值

(3)z-index仅能在一定元素上有效性(例如position:absolute;)

例子:

亚洲必赢官网 41

 

亚洲必赢官网 42

 

来得效果:

亚洲必赢官网 43

 

——那种重叠,假使不安装z-index属性会是哪些效益?

显示效果:

亚洲必赢官网 44

“后起之秀当先前辈”;所以一旦想更改那种重叠,就要选拔z-index属性)

 

网站地图xml地图