css教程:CSS定位属性的应用

The CSS positioning properties allows you to position an element.

使用CSS定位属性可以让你定义元素的位置

如何让一元素相对于原始位置进行相对定位 Position:relative

This example demonstrates how to position an element relative to its normal position.

Examples 实例:

Source Code to Run [www.fun52.com]

h2.pos_left

{

position:relative;

left:-20px

}

h2.pos_right

{

position:relative;

left:20px

}

This is a heading in normal position

This heading is moved left to its normal position

This heading is moved right to its normal position

Relative positioning moves an element RELATIVE to its original position.

The style “left:-20px” subtracts 20 pixels from the element’s original left position.

The style “left:20px” adds 20 pixels to the element’s original left position.

   [ 可先修改部分代码 再运行查看效果 ]

如何使用绝对值来定位元素 Position:absolute

This example demonstrates how to position an element using an absolute value.

Examples 实例:

Source Code to Run [www.fun52.com]

h2.pos_abs

{

position:absolute;

left:100px;

top:150px

}

This is a heading with an absolute position

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.

www.fun52.com

   [ 可先修改部分代码 再运行查看效果 ]

何如设置元素的形状,并以这个形状显示 Set the shape of an element

This example demonstrates how to set the shape of an element. The element is clipped into this shape, and displayed.

Examples 实例:

第 1 2 3 页

css教程:CSS定位属性的应用

相关文章:

你感兴趣的文章:

标签云: