标签定位--相对定位和绝对定位

最新推荐文章于 2023-12-17 16:48:32 发布

kingppy

最新推荐文章于 2023-12-17 16:48:32 发布

阅读量1k

点赞数

文章标签： xhtml 文档浏览器 html layout div

定位标签：position
包含属性：relative（相对）
absolute（绝对）

1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）

2.position:absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。）

3.父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父窗口左上角

文章出处：标准之路(http://www.aa25.cn/div_css/899.shtml)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <mce:style></mce:style><style mce_bogus="1">body { padding:20px;} a { color:#00f; text-decoration:none;} a:hover { color:#f60; position:relative; top:1px; left:1px;} #layout { width:600px; margin:0 auto; background:#eee; position:relative;} #new { position:absolute; top:-15px; left:140px;}</style> </head> <body> <div id="layout"> <div id="new"><img src="http://www.zhuna.cn/images/new.gif" mce_src="http://www.zhuna.cn/images/new.gif" /></div> 这里是内容<a href="#" mce_href="#">这里是链接</a>这里也是内容</div> </body> </html> 文章出处：标准之路(http://www.aa25.cn/div_css/899.shtml)

kingppy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
标签定位--相对定位和绝对定位

<br />定位标签：position<br />包含属性：relative（相对） <br /> absolute（绝对）<br />1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）<br />2.position:absolute; 表示绝对定位，位置将依据浏览
复制链接

扫一扫