CSS高级教程之CSS的定位属性和实例

webptr · 发表于 2007-10-8 11:18:23

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>

webptr · 发表于 2007-10-8 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

		自动登录	找回密码
密码			注册

全国各地医院查询	重量转换换算	RGB颜色查询	交通标志大全	各类快递查询
简体繁体转换	黄金价格实时走势	万年历查询	实时汇率转换	列车时刻查询
在线翻译工具	CSS中文手册	HTML学习教程	MySQL中文手册	JavaScript中文手册
PHP安全基础手册	PHP5面向对象编程教程	正则表达式系统教程	SQL Server精华	Apache 2.2 中文手册
DOS命令全集指南	windows脚本技术中文版	股票行情查询	历史上的今天	邮编区号查询
长度转换换算	货币汇率转换	常用电话号码	体育彩票查询	手机位置查询
域名Whois信息查询	谷歌PR值查询	台州网站建设	台州网站开发	台州域名注册
天气预报查询	长度转换换算器	在线电子地图	车牌号码查询	中国百家姓查询

CSS高级教程之CSS的定位属性和实例

相关帖子

浏览过的版块