您当前的位置: 首页 » DIV+CSS编程 » CSS高级教程之CSS的定位属性和实例
CSS高级教程之CSS的定位属性和实例
论坛链接
CSS定位属性允许你对元素进行定位。
CSS 定位 (Positioning)实例：
定位：相对定位
本例演示如何相对于其正常位置来定位元素。
<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>
<body>
<h2>This is a heading in normal position</h2>
<h2 class="pos_left">This heading is moved left to its normal position</h2>
<h2 class="pos_right">This heading is moved right to its normal position</h2>
<p>Relative positioning moves an element RELATIVE to its original position.</p>
<p>The style "left:-20px" subtracts 20 pixels from the element's original left position.</p>
<p>The style "left:20px" adds 20 pixels to the element's original left position.</p>
</body>
</html>
定位：绝对定位
本例演示如何使用绝对值来定位元素。
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 class="pos_abs">This is a heading with an absolute position</h2>
<p>With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.</p>
</body>
</html>
设置元素的形状
本例演示如何设置元素的形状。此元素被剪入这个形状中，然后被显示出来。
<html>
<head>
<style type="text/css">
img
{
position:absolute;
clip:rect(0px 50px 200px 0px)
}
</style>
</head>
<body>
<p>The clip property is here cutting an image:</p>
<p><img border="0" src="bookasp20.gif" width="120" height="151"></p>
</body>
</html>
溢出
本例演示当元素内容太大而超出规定区域时，如何设置溢出属性来规定相应的动作。
<html>
<head>
<style type="text/css">
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll
}
</style>
</head>
<body>
<p>The overflow property decides what to do if the content inside an element exceeds the given width and height properties.</p>
<div>
You can use the overflow property when you want to have better control of the layout. Try to change the overflow property to: visible, hidden, auto, or inherit and see what happens. The default value is visible.
</div>
</body>
</html>
垂直排列图象
本例演示如何在文本中垂直排列图象。
<html>
<head>
<style type="text/css">
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
</style>
</head>
<body>
<p>
This is an
<img class="top" border="0"
src="/i/example_moving.gif" />
image inside a paragraph.
</p>
<p>
This is an
<img class="bottom" border="0"
src="/i/example_moving.gif" />
image inside a paragraph.
</p>
</body>
</html>
CSS 定位 (Positioning)实例：
定位：相对定位
本例演示如何相对于其正常位置来定位元素。
<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>
<body>
<h2>This is a heading in normal position</h2>
<h2 class="pos_left">This heading is moved left to its normal position</h2>
<h2 class="pos_right">This heading is moved right to its normal position</h2>
<p>Relative positioning moves an element RELATIVE to its original position.</p>
<p>The style "left:-20px" subtracts 20 pixels from the element's original left position.</p>
<p>The style "left:20px" adds 20 pixels to the element's original left position.</p>
</body>
</html>
定位：绝对定位
本例演示如何使用绝对值来定位元素。
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 class="pos_abs">This is a heading with an absolute position</h2>
<p>With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.</p>
</body>
</html>
设置元素的形状
本例演示如何设置元素的形状。此元素被剪入这个形状中，然后被显示出来。
<html>
<head>
<style type="text/css">
img
{
position:absolute;
clip:rect(0px 50px 200px 0px)
}
</style>
</head>
<body>
<p>The clip property is here cutting an image:</p>
<p><img border="0" src="bookasp20.gif" width="120" height="151"></p>
</body>
</html>
溢出
本例演示当元素内容太大而超出规定区域时，如何设置溢出属性来规定相应的动作。
<html>
<head>
<style type="text/css">
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll
}
</style>
</head>
<body>
<p>The overflow property decides what to do if the content inside an element exceeds the given width and height properties.</p>
<div>
You can use the overflow property when you want to have better control of the layout. Try to change the overflow property to: visible, hidden, auto, or inherit and see what happens. The default value is visible.
</div>
</body>
</html>
垂直排列图象
本例演示如何在文本中垂直排列图象。
<html>
<head>
<style type="text/css">
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
</style>
</head>
<body>
<p>
This is an
<img class="top" border="0"
src="/i/example_moving.gif" />
image inside a paragraph.
</p>
<p>
This is an
<img class="bottom" border="0"
src="/i/example_moving.gif" />
image inside a paragraph.
</p>
</body>
</html>
#2楼发布者：webptr时间：2007-10-08 11:18:35
Z-index
Z-index可被用于将在一个元素放置于另一元素之后。
<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<img class="x" src="bulbon.gif" width="100" height="180">
<p>Default z-index is 0. Z-index -1 has lower priority.</p>
</body>
</html>
Z-index
上面的例子中的元素已经更改了Z-index。
<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:1
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<img class="x" src="bulbon.gif" width="100" height="180">
<p>Default z-index is 0. Z-index 1 has higher priority.</p>
</body>
</html>
CSS 定位属性 (Positioning)
CSS定位属性允许你对元素进行定位。
浏览器支持：IE: Internet Explorer, F: Firefox, N: Netscape。
W3C：“W3C”列的数字显示出定位(Positioning)属性由哪个CSS标准定义（CSS1还是CSS2）。
Property Description Values IE F N W3C
bottom 设置元素的底边距离其父元素的底边之上或之下的距离。 auto
%
length
5 1 6 2
clip 设置元素的形状。元素被剪入这个形状之中，然后被显示出来。 shape
auto
4 1 6 2
left 设置元素的左边与其父元素的右边或左边的的距离。 auto
%
length
4 1 4 2
overflow 设置当元素内容溢出其区域时如何对内容进行管理 visible
hidden
scroll
auto
4 1 6 2
position 将元素放置于静态、相对、绝对或固定的位置 static
relative
absolute
fixed
4 1 4 2
right 设置元素的右边距父元素右边的左侧或右侧的距离 auto
%
length
5 1 6 2
top 设置元素的顶边距父元素的顶边的上方或下方的距离 auto
%
length
4 1 4 2
vertical-align 设置元素的垂直排列。 baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%
4 1 4 1
z-index 设置元素的堆叠顺序 auto
number
4 1 6 2
Z-index可被用于将在一个元素放置于另一元素之后。
<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<img class="x" src="bulbon.gif" width="100" height="180">
<p>Default z-index is 0. Z-index -1 has lower priority.</p>
</body>
</html>
Z-index
上面的例子中的元素已经更改了Z-index。
<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:1
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<img class="x" src="bulbon.gif" width="100" height="180">
<p>Default z-index is 0. Z-index 1 has higher priority.</p>
</body>
</html>
CSS 定位属性 (Positioning)
CSS定位属性允许你对元素进行定位。
浏览器支持：IE: Internet Explorer, F: Firefox, N: Netscape。
W3C：“W3C”列的数字显示出定位(Positioning)属性由哪个CSS标准定义（CSS1还是CSS2）。
Property Description Values IE F N W3C
bottom 设置元素的底边距离其父元素的底边之上或之下的距离。 auto
%
length
5 1 6 2
clip 设置元素的形状。元素被剪入这个形状之中，然后被显示出来。 shape
auto
4 1 6 2
left 设置元素的左边与其父元素的右边或左边的的距离。 auto
%
length
4 1 4 2
overflow 设置当元素内容溢出其区域时如何对内容进行管理 visible
hidden
scroll
auto
4 1 6 2
position 将元素放置于静态、相对、绝对或固定的位置 static
relative
absolute
fixed
4 1 4 2
right 设置元素的右边距父元素右边的左侧或右侧的距离 auto
%
length
5 1 6 2
top 设置元素的顶边距父元素的顶边的上方或下方的距离 auto
%
length
4 1 4 2
vertical-align 设置元素的垂直排列。 baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%
4 1 4 1
z-index 设置元素的堆叠顺序 auto
number
4 1 6 2