定位（Positioning） 属性

网络知识大全 • • css教程 • 901 阅读

定位（Positioning） 属性

CSS position 属性(规定元素的定位类型)

position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。

{
position:absolute;
left:100px;
top:150px;
}

值 描述
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed 生成固定定位的元素，相对于浏览器窗口进行定位。

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

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
sticky 粘性定位，该定位基于用户滚动的位置。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
inherit 规定应该从父元素继承 position 属性的值。
initial 设置该属性为默认值，详情查看 CSS initial 关键字。

absolute和relative的区别

absoleute绝对定位的意思是说，它的定位不受父元素中其他元素的影响

relative相对定位，就是会受到父元素中其他元素影响

属性 说明 CSS
bottom 设置定位元素下外边距边界与其包含块下边界之间的偏移 2
clear 规定元素的哪一侧不允许其他浮动元素 1
clip 剪裁绝对定位元素 2
cursor 规定要显示的光标的类型（形状） 2
display 规定元素应该生成的框的类型 1
float 规定框是否应该浮动 1
left 设置定位元素左外边距边界与其包含块左边界之间的偏移 2
overflow 规定当内容溢出元素框时发生的事情 2
position 规定元素的定位类型 2
right 设置定位元素右外边距边界与其包含块右边界之间的偏移 2
top 设置定位元素的上外边距边界与其包含块上边界之间的偏移 2
visibility 规定元素是否可见 2
z-index 设置元素的堆叠顺序 2

CSS bottom 属性

对于绝对定位元素（absolute），bottom属性设置单位高于/低于包含它的元素的底边。

对于相对定位元素（relative），bottom属性设置单位高于/低于其正常位置的元素的底边。

{
position:absolute;
bottom:10px;
}

img.ex2
{
position:relative;
bottom:-50px;
}

注意：如果"position：static"，底部的属性没有任何效果。

说明： 对于 static 元素，为 auto；对于长度值，则为相应的绝对长度；对于百分比数值，为指定值；否则为 auto。 对于相对定义元素，如果 bottom 和 top 都是 auto，其计算值则都是 0；如果其中之一为 auto，则取另一个值的相反数；如果二者都不是 auto，bottom 将取 top 值的相反数。

值 描述
auto 默认值。通过浏览器计算底部的位置。
% 设置以包含元素的百分比计的底边位置。可使用负值。
length 使用 px、cm 等单位设置元素的底边位置。可使用负值。
inherit 规定应该从父元素继承 bottom 属性的值。

CSS top 属性

top 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

对于相对定义元素，如果 top 和 bottom 都是 auto，其计算值则都是 0；如果其中之一为 auto，则取另一个值的相反数；如果二者都不是 auto，bottom 将取 top 值的相反数。

{
position:absolute;
top:0px;
}

注意： 如果 "position" 属性的值为 "static"，那么设置 "top" 属性不会产生任何效果。

值 描述
auto 默认值。通过浏览器计算上边缘的位置。
% 设置以包含元素的百分比计的上边位置。可使用负值。
length 使用 px、cm 等单位设置元素的上边位置。可使用负值。
inherit 规定应该从父元素继承 top 属性的值。

CSS left 属性

left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。

如果 "position" 属性的值为 "static"，那么设置 "left" 属性不会产生任何效果。

{
position:absolute;
left:50px;
}

注意： 如果 "position" 属性的值为 "static"，那么设置 "left " 属性不会产生任何效果。

值 描述
auto 默认值。通过浏览器计算右边缘的位置。
% 设置以包含元素的百分比计的右边位置。可使用负值。
length 使用 px、cm 等单位设置元素的右边位置。可使用负值。
inherit 规定应该从父元素继承 right 属性的值。

CSS right 属性

对于 static 元素，为 auto；对于长度值，则为相应的绝对长度；对于百分比数值，为指定值；否则为 auto。 对于相对定义元素，left 的计算值始终等于 right。

right 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。

{
position:absolute;
right:50px;
}

注意： 如果 "position" 属性的值为 "static"，那么设置 "right" 属性不会产生任何效果。

CSS float 属性（浮动）

float属性指定一个盒子（元素）是否应该浮动。

{
float:right;
}

注意： 绝对定位的元素忽略float属性！

值 描述
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。

段落的首字母浮动于左侧

{
float:left;
width:1.2em;
font-size:400%;
font-family:algerian,courier;
line-height:50%;
}

创建一个水平菜单

<style>
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300;}
li {display:inline;}
</style>

CSS clear 属性

clear属性指定段落的左侧或右侧不允许浮动的元素。

值 描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。

CSS overflow 属性

overflow属性指定如果内容溢出一个元素的框，会发生什么。

{
background-color: lightblue;width: 110px;height: 110px;
overflow: scroll;
}

{background-color: lightblue;width: 110px;height: 110px;
overflow: hidden;
}

{
background-color: lightblue;width: 110px;height: 110px;
overflow: auto;
}

{
background-color: lightblue;width: 110px;height: 110px;
overflow: visible;
}

值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

CSS clip 属性

如果图像大于包含它的元素，会发生什么？-clip属性，让你指定一个绝对定位的元素，该尺寸应该是可见的，该元素被剪裁成这种形状并显示。

{
position:absolute;
clip:rect(0px,60px,200px,10px);（上、右、下、左）
}

注意：: 如果先有"overflow：visible"，clip属性不起作用。

值 描述
shape 设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)
auto 默认值。不应用任何剪裁。
inherit 规定应该从父元素继承 clip 属性的值。

CSS cursor 属性（鼠标光标）

cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状

{cursor:crosshair}
{cursor:help}
{cursor:wait}

值 描述
url 需使用的自定义光标的 URL。

注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针（一只手）
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右（东）移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize 此光标指示矩形框的边缘可被向上（北）移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize 此光标指示矩形框的边缘可被向下移动（南）。
w-resize 此光标指示矩形框的边缘可被向左移动（西）。
text 此光标指示文本。
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）。

CSS display 属性

display 属性规定元素应该生成的框的类型。

值 描述
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column 此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
inherit 规定应该从父元素继承 display 属性的值。

CSS visibility 属性

visibility属性指定一个元素是否是可见的。

{visibility:visible}
{visibility:hidden}

提示:即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。

值 描述
visible 默认值。元素是可见的。
hidden 元素是不可见的。
collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
inherit 规定应该从父元素继承 visibility 属性的值。

CSS z-index 属性

z-index 属性指定一个元素的堆叠顺序。

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

注意： z-index 进行定位元素(position:absolute, position:relative, or position:fixed)。

值 描述
auto 默认。堆叠顺序与父元素相等。
number 设置元素的堆叠顺序。
inherit 规定应该从父元素继承 z-index 属性的值。

浮动案例

创建无表格的首页

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.header {
background-color: #2196F3;
color: white;
text-align: center;
padding: 15px;
}
.footer {
background-color: #444;
color: white;
padding: 15px;
}
.topmenu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #777;
}
.topmenu li {
float: left;
}
.topmenu li a {
display: inline-block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
.topmenu li a:hover {
background-color: #222;
}
.topmenu li a.active {
color: white;
background-color: #4CAF50;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.sidemenu {
width: 25%;
}
.content {
width: 75%;
}
.sidemenu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.sidemenu li a {
margin-bottom: 4px;
display: block;
padding: 8px;
background-color: #eee;
text-decoration: none;
color: #666;
}
.sidemenu li a:hover {
background-color: #555;
color: white;
}
.sidemenu li a.active {
background-color: #008CBA;
color: white;
}
</style>
</head>
<body>

<ul class="topmenu">
<li><a href="#home" class="active">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系我们</a></li>
<li><a href="#about">关于我们</a></li>
</ul>

<div class="clearfix">
<div class="column sidemenu">
<ul>
<li><a href="#flight">The Flight</a></li>
<li><a href="#city" class="active">The City</a></li>
<li><a href="#island">The Island</a></li>
<li><a href="#food">The Food</a></li>
<li><a href="#people">The People</a></li>
<li><a href="#history">The History</a></li>
<li><a href="#oceans">The Oceans</a></li>
</ul>
</div>

<div class="column content">
<div class="header">
<h1>The City</h1>
</div>
<h1>Chania</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>You will learn more about responsive web pages in a later chapter.</p>
</div>
</div>

<div class="footer">
<p>底部文本</p>
</div>

</body>
</html>

版权声明：
作者：网络知识大全
链接：http://www.maycasi.com/115.html
来源：MAYCASI网络知识大全
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>