css div CSS教程——成分定位

2019-09-19 05:10 来源:未知

第六步:设置固定高度

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

图片 1

相比之下好一点,但我们并不知道元素内容高度将会是多少,所以在此设置一个固定高度也是我们实际中的一个死穴,个人不建议这样使用。如果为了需要,我们可以通过别的办法来实现。

  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|绝对定位 相对定位

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

举例:实现遮罩效果

图片 2<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

图片 3

同样的原理实现:全屏自适应遮罩层效果,切加上margin:auto可实现水平且直居中。

图片 4<!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

图片 5

第四步:relative和absolute的结合

第二步中大家知道元素相对定位“relative”是相对于元素自身定位,而在第三步中大家知道元素绝对定位“absolute”是相对于html。但这种说法只有满足这样的条件才是正常的:“绝对定位元素的任何祖先元素没有进行任何的“relative”或者“absolute”设置,那么绝对定位的元素的参考物就是html”,这样一来,“relative”和“absolute”的结合就能起到很大的作用。

我们接下来看一个截图:

图片 6

上图做为一个实例来说明“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”了,大家看看与第三步的变化:

图片 7

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

图片 8

这样的制作只是用来说明absolute的作用,如果只能实现上面的效果,可能在实际制作中并不完美,为了让其更完美一些,在这个基础上我们在来看下面这一步。

可见, position:relative;并不是很好用。

一、包含块(Containing Block)

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

初步效果:

图片 9

为了后面能更好的了解相关知识点,我特将此例的DOM草图画出来:

图片 10

上面的DOM图,我想大家一定非常容易的理解,下面就一起来主要看position的使用。

如果给父元素(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;
}

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>

图片 11

块状元素设置position:absolute后,chrome下top,right,bottom,left变为auto,而ff下直接是计算出的宽度。

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

我们来看看效果:

图片 12

从效果图可以再次印证上面说的第二点。元素“div-1”向下移动了20px,向左移动了40px,本身位置变化了,而元素最初所占的物理空间依然还是存在,另外一点元素相对定位后并没有影响其他相邻的元素。

  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;
    }注意,在这个例子中会发现夫元素的告诉不会随着子元素的告诉变化,所以如果父元素的背景和边框需要定义一个足够高的高度才能显示出来。

position&containing block,positionfixed

第七步:float

前两步,使用绝对定位都并不是很理想,那么我们可以考虑使用float来解决。我们可以在一个元素上使用float,让元素向左或向右,而且还可以使用文本围绕在这个元素的周边(这个作用在文本围绕图片特别有用)。下面来模拟一下:

CSS

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

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

图片 13

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

第八步:多列浮动

上面展示的是一个列浮动,接下来看看多列的变化:

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

图片 15

浮动与绝对定位来相比,现在解决了其高度自适应的问题,但也存在一个问题,浮动也破坏了元素当初的文档流,使其父元素塌陷了,那么为了解决这个问题,我们有必要对其进行清除浮动。

  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和float的关系

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

3、同时设置position:absolute和float,float无效。

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

举例:

图片 16<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

图片 17

为什么绝对定位元素可能会覆盖浮动元素,因为浏览器渲染的时候相同堆叠上下文中,先渲染非定位元素,再渲染浮动元素,最后渲染已定位元素。

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

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

如果上面说的还不是很懂,或者想更深入了解z-index原理,可参考:z-index堆叠规则

第十步:扩展阅读

上面只是简单的介绍了一下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 评论

图片 18

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>

图片 19

包含块的宽度可以为负,行内元素的第一个框的起始位置位于最后一个框结束位置的右侧,这时包含块为负值。

举例:direction:rtl,保护块的顶,右是祖先元素第一个框的顶,右padding框,下左同理。

图片 20<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

图片 21

其他情况相对简单,不做介绍。接下来是position各取值细节。

第九步:清除浮动

为了让浮动元素的父元素不在处于塌陷状态下,我们需要对浮动元素进行清除浮动:

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

图片 22

浮动是在css中是一个很深的课题,这里只是轻描淡写了一下。前面在《CSS的Float之一》和《CSS的Float之二》也介绍了一些有关于float的相关知识,有关于清除浮动的,大家也可以点阅《Clear Float》。

五、position:fixed

fixed是absolute的特例,相对于视窗来定位,所以页面滚动它还是停靠在相对位置。

所以fixed也会改变元素的display属性,会让元素脱离正常流。

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

图片 23

此时元素“div-1a”不在当初的文档流中,而且其此时定位也是相对于html来进行定位,那么我们有时候并不是需要这样的效果,哪果我们元素div-1a还想在div-1是进行绝对定位,那要怎么办呢?此时就要发挥前面第二步的“relative”作用了。

二、position:static

static是默认值,表示元素没有别"positioned",position其它值表示元素被"positioned"。所以"已定位元素"表示的就是设置position属性为除static之外的值的元素。position:static元素的布局就是按照盒子模型在正常流中来布局。

使用:

一般不用显示指定,除非想要覆盖之前设置的定位,让元素回归到正常流。

七、资源链接

8 Box model

9 Visual formatting model

中文版CSS2/visuren

中文版CSS2/visudet/zh-hans

KB012: 绝对定位( Absolute positioning )

 

本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:

 

block,positionfixed 一、包含块(Containing Block) 要讲position,首先就涉及到一个概念:包含块。 1、包含块介绍 包含块简单理解就是...

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决定的,和根元素无关。

四、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不起作用,所以可以用来去浮动。

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

不使用top,right,bottom,left中任何一个属性或者使用auto作为值。

一般都是用absolute加margin调整位置。

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

图片 24<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

图片 25

分析:因为position:absolute让<i>标签的display值从inline变成block,所以可以设置宽高。通过margin调整位置。

类似例子:

图片 26<!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

图片 27

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

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>

图片 28

原理:和float一样,position:absolute让元素脱离正常流,而父元素还在正常流中,它们已经是两个世界的东东了,自然撑不起父元素高度。

Note:设置position:absolute后再设置float:left不生效,且最终计算的float值还是none而不是设置的值。

TAG标签: css
版权声明:本文由彩民之家高手论坛发布于前端知识,转载请注明出处:css div CSS教程——成分定位