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 实例：
代码调试框 [www.dedecms.com]<html><br /> <head></p> <style type="text/css"> h2.pos_left { position:relative; left:-20px } h2.pos_right { position:relative; left:20px } </style> <p></head></p> <p><body></p> <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> <p></body></p> <p></html>
[ 可先修改部分代码再运行查看效果 ]

如何使用绝对值来定位元素 Position:absolute
This example demonstrates how to position an element using an absolute value.
Examples 实例：
代码调试框 [www.dedecms.com]<html><br /> <head></p> <style type="text/css"> h2.pos_abs { position:absolute; left:100px; top:150px } </style> <p></head></p> <p><body></p> <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.<br /> www.dedecms.com</p> <p></body></p> <p></html>
[ 可先修改部分代码再运行查看效果 ]

何如设置元素的外形，并以这个外形显示 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 实例：
代码调试框 [www.dedecms.com]<html><br /> <head></p> <style type="text/css"> img { position:absolute; clip:rect(0px 30px 150px 0px) } </style> <p></head></p> <p><body></p> <p>clip 属性用于剪切图片：</p> <p><img decoding="async" border="0" src="http://p1.dedecms.com/divcss/52006129151936.jpg" /></p> <p></body></p> <p></html>
[ 可先修改部分代码再运行查看效果 ]

Overflow
当元素的内容超过了指定的范围，overflow属性就可以指定应该以怎样的形式来处理
This example demonstrates how to set the overflow property to specify what should happen when an element's content is too big to fit in a specified area.
Examples 实例：
代码调试框 [www.dedecms.com]<html><br /> <head></p> <style type="text/css"> div { background-color:#00FFFF; width:150px; height:150px; overflow: scroll } </style> <p></head></p> <p><body></p> <p>The overflow property decides what to do if the content inside an element exceeds the given width and height properties.</p> <p>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.</p> <p></body></p> <p></html>
[ 可先修改部分代码再运行查看效果 ]

如何垂直对齐一张图片 Vertical align an image
This example demonstrates how to vertical align an image in a text.
Examples 实例：
代码调试框 [www.dedecms.com]<html><br /> <head></p> <style type="text/css"> img.top {vertical-align:text-top} img.bottom {vertical-align:text-bottom} </style> <p></head></p> <p><body></p> <p> This is an<br /> <img class="top" border="0" src="http://p1.dedecms.com/divcss/52006129151936.jpg" /><br /> image inside a paragraph. </p> <p> This is an<br /> <img class="bottom" border="0" src="http://p1.dedecms.com/divcss/52006129151936.jpg" /><br /> image inside a paragraph. </p> <p></body></p> <p></html>
[ 可先修改部分代码再运行查看效果 ]

Z-index
Z-index可以让一元素放到另一元素的"后面"
Z-index can be used to place an element "behind" another element.
Examples 实例：
代码调试框 [www.dedecms.com]<html><br /> <head></p> <style type="text/css"> img.x { position:absolute; left:0px; top:0px; z-index:-1 } </style> <p></head></p> <p><body></p> <h1>This is a Heading www.dedecms.com</h1> <p><img decoding="async" class="x" src="http://p1.dedecms.com/divcss/52006129151936.jpg" /></p> <p>Default z-index is 0. Z-index -1 has lower priority.</p> <p></body></p> <p></html>
[ 可先修改部分代码再运行查看效果 ]

Z-index
上面例子中的元素现在Z-index值已经发生的变化
The elements in the example above have now changed their Z-index.
Examples 实例：
代码调试框 [www.dedecms.com]<html><br /> <head></p> <style type="text/css"> img.x { position:absolute; left:0px; top:0px; z-index:1 } </style> <p></head></p> <p><body></p> <h1>This is a Heading www.dedecms.com</h1> <p><img decoding="async" class="x" src="http://p1.dedecms.com/divcss/52006129151936.jpg" /></p> <p>Default z-index is 0. Z-index 1 has higher priority.</p> <p></body></p> <p></html>
[ 可先修改部分代码再运行查看效果 ]

The CSS positioning properties allow you to specify the left, right, top, and bottom position of an element. It also allows you to set the shape of an element, place an element behind another, and to specify what should happen when an element's content is too big to fit in a specified area.
CSS定位属性答应你指定元素上下左右的位置。也答应你设置元素的外形，将元素安置在另一个元素的后面，并指定当元素内容超出范围后应该怎么做。

柠檬铺

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

发表回复取消回复

Grow your business fast with

Suku

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

发表回复 取消回复

Grow your business fast with

Suku

发表回复取消回复