【代码笔记】Web-CSS-CSS Positioning
程序员文章站
2022-04-30 10:14:05
一，效果图。 二，代码。 参考资料：《菜鸟教程》 ......
一，效果图。
二，代码。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css positioning</title>
<style>
p.pos_fixed {
position: fixed;
top: 30px;
right: 5px;
}
h2.pos_left {
position: relative;
left: -20px;
}
h2.pos_right {
position: relative;
left: 20px;
}
h2.pos_top {
position: relative;
top: -50px;
}
h2.absolute {
position: absolute;
left: 100px;
top: 150px;
}
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>
<p class="pos_fixed">some more text</p>
<p><b>note:</b> ie7 and ie8 supports the fixed value only if a !doctype is specified.</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<h2>this is a heading with no position</h2>
<h2 class="pos_left">this heading is moved left according to its normal position</h2>
<h2 class="pos_right">this heading is moved right according 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>
<h2>this is a heading with no position</h2>
<h2 class="pos_top">this heading is moved upwards according to its normal position</h2>
<p><b>note:</b> even if the content of the relatively positioned element is moved, the reserved space for the element is still preserved in the normal flow.</p>
<h2 class="absolute">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>
<h1>this is a heading</h1>
<img src="w3css.gif" width="100" height="140" />
<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
</body>
</html>
参考资料：《菜鸟教程》
上一篇： 冬季多吃“红色食物”的好处 冬季多吃什么“红色食物”？
下一篇： 餐厅熙熙攘攘摩肩接踵