css的相对定位和绝对定位

最新推荐文章于 2022-08-11 19:05:03 发布

zth1002

最新推荐文章于 2022-08-11 19:05:03 发布

阅读量842

点赞数 1

分类专栏： css 文章标签： css的相对定位和绝对定位

本文链接：https://blog.csdn.net/zth1002/article/details/46455233

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一直对css样式就是懂点皮毛，经常遇到定位排版都不知所措，归根到底还是对一些原理性的东西没掌握，今天刚好有时间研究一下相对定位和绝对定位，网上看了css十天教程那里总结了：

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

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

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

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

代码如下：

<!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" />
<style>
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" /></div>
  这里是内容<a href="#">这里是链接</a>这里也是内容</div>
</body>
</html>

看了，顺便记录一下，免得以后忘记，加深印象