CSS中的几种定位简介

html-css06

CSS中的几种定位简介,第1张

4 种不同类型的定位。

static:默认值,没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

relative:生成相对定位的元素,相对于其正常位置进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed:元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。

absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

CSS 有三种基本的定位机制:普通流、浮动和绝对定位。

除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。

加float:right不是可以的吗?

如果不用float的话css可以修改成下面这样。也就是用绝对定位,注意使用绝对定位一定要确定是相对于谁定位,默认情况下它是相对于浏览器文档定位,除非包裹他的父元素有relative的,那么它会就近相对于position:absolute的父元素来定位。不过注意需要加上display:inline-block不然会窜到下一行的。

<style type="text/css">

td{position:relative}

.day {color: #CD25C2

position:absolute

right: 5px

text-shadow: 2px 2px 2px red

font-weight: bold

display:inline-block

}

</style>