CSS 6.1 定位-定位概述

来源：互联网发布：进击的巨人剧透知乎编辑：程序博客网时间：2024/06/05 01:15

CSS 6.1 定位-定位概述

1.一切皆为框。在网页中所有元素都有一个框（只是有的隐藏了），如：<h1><div>等块级元素，即块框；等行内元素，即行内框。

注：所谓元素包括及其包含的内容。

2.与定位相关的属性："left", "top", "right" 以及 "bottom"

可能的值：

top

定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

right

定义了定位元素右外边距边界与其包含块右边界之间的偏移。

bottom

定义了定位元素下外边距边界与其包含块下边界之间的偏移。

left

定义了定位元素左外边距边界与其包含块左边界之间的偏移。

①数值，如10mm 10px

②百分比，如10%。

注：百分比是相对于包含它的父元素的10%。如下图所示

<html><head><style type="text/css">img{position:absolute;left:10%}</style></head><body><h1>这是标题</h1><img class="normal" src="/i/eg_smile.gif" /><p>一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。</p></body></html>

3.定位属性position

可能的值

描述

absolute

生成绝对定位的元素，相对于其用absolute fixed relative[除了static之外]定位的第一个（最内层）祖先元素进行定位。元素的位置通过"left", "top", "right" 以及"bottom" 属性进行规定。

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位(即使页面移动[用滚动条]，元素位置相对于浏览器窗口也不动)。元素的位置通过"left", "top", "right" 以及"bottom" 属性进行规定。

relative

生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的LEFT 位置添加20 像素（右移20px）。

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

static

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

inherit

规定应该从父元素继承 position 属性的值。

注：在定位设置中，除了默认的static不会出现重叠情况，其他的absolute fixed relative都会出现重叠的情况！！！

例如1（绝对定位absolute）：

h2.pos_abs {

position：absolute；

left：15px；

top：25px；

}

结果：

例如2（固定定位fixed）：

p.pos_fixed{

position：fixed；

top：30px；

right：5px；

}

结果：

例如3（相对定位relative）：

h2.pos_reft { position：relative；left：-20px；} //左移20px

h2.pos_right { position：relative；left：20px；} //右移20px

结果：

4.设置堆叠顺序属性z-index

值

描述

auto

默认。堆叠顺序与父元素相等。若都未设置，其值为0。

number

设置元素的堆叠顺序。可正可负，越大(正)离用户越近，越小(负)离用户越远。

inherit

规定应该从父元素继承 z-index 属性的值。

例如：

img{

position：absolute；

left：0px；

top：0px；

z-index：-1；//在后层

}

结果：

5.溢出属性overflow，规定当内容溢出元素框时发生的事。

可能的值

描述

visible

默认值。内容不会被修剪，会呈现在元素框之外。

hidden

内容会被修剪，并且其余内容是不可见的。

scroll

内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

但是不论是否需要，用户代理都会提供一种滚动机制。

auto

如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit

规定应该从父元素继承 overflow 属性的值。

例如：

div{

width：150px；

height：150px；

overflow：visible/hidden/scroll/auto；

}

结果：

6.垂直对齐方式：vertical-align

值

描述

baseline

默认。元素放置在父元素的基线上。

sub

垂直对齐文本的下标。

super

垂直对齐文本的上标

top

把元素的顶端与行中最高元素的顶端对齐

text-top

把元素的顶端与父元素字体的顶端对齐

middle

把此元素放置在父元素的中部。

bottom

把元素的顶端与行中最低的元素的顶端对齐。

text-bottom

把元素的底端与父元素字体的底端对齐。

length

使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。

inherit

规定应该从父元素继承 vertical-align 属性的值。

例如：

CSS中：

img.top { vertical-align：text-top；}

img.bottom { vertical-align：text-bottom；}

HTML中： [cute可爱的]

这是一幅<img class=“top”str=“/图像/cute.gif”/>位于段落中的图像。

这是一幅<img class=“bottom”str=“/图像/cute.gif”/>位于段落中的图像。

结果：

注：<img>与父元素的顶端/地端对齐。

7.剪切属性clip，注：只能在position=absolute或fixed时使用。

值

描述

shape

设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)

auto

默认值。不应用任何剪裁。

inherit

规定应该从父元素继承 clip 属性的值。

格式：chip：rect（1px 12px 11px 2px）；

含义：top bottom是剪切后顶/底距离原顶的偏移，left right是剪切后左/右距离原左的偏移。

注几种特殊情况：

①当bottom < top或right < left时，不显示。

②top或left取auto，相当于top或left = 0。

③bottom和right取值为auto，相当于元素的100%宽度（即取能取到的最大值）。

更多关于clip参见我的博客链接：CSS 6.1补充-详细讲解Clip属性（转载）

0 0