`

相对定位　绝对定位

    博客分类：
  • HTML
 
阅读更多

相对定位：如果对一个元素相对定位的话，然后，可以通过设置垂直或水平位置，让这个元素相对于它的本身进行移动。属性并没有脱离文档流的，所以元素本身所占的位置会保留。。因此，移动元素会导致它覆盖其它框。（相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。）

例子：

<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>
<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
</body>
</html>

 效果：

绝对定位：绝对定位使元素的位置与文档流无关，因此不占据空间。绝对定位是对最近的已定位祖先元素，如果不存在已定位的祖先元素，那么是对最初的包含块。

例子：

<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>

<body>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
</body>
</html>

 效果图：

通过绝对定位，元素可以放置到页面上的任何位置。上面的标题距离页面左侧 100px，距离页面顶部 150px。

文档流定义：html的布局机制就是用文档流模型的，即块元素（block）独占一行，内联元素（inline）。不独占一行

如果要使用相对定位属性或是绝对定位属性，absolute+margin、float+relative、和relative+absolute。

 

 

  • 大小: 21.9 KB
  • 大小: 7.6 KB
分享到：
| 下划线滑动
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics