css中的相对定位和绝对定位

最新推荐文章于 2024-08-20 13:42:14 发布

yangxiaonawzy

最新推荐文章于 2024-08-20 13:42:14 发布

阅读量1.7k

点赞数

文章标签： css 文档 border xhtml div 浏览器

这几天在看div+css，在网上找到了很多的资料，我都不知道选择哪一个了。这两天在看<<十天学会web标准(div+css)>>，感觉还可以。把今天学习过程中遇到的问题和知识点，给记录下来。

首先学习到的是css中的相对定位和绝对定位。

定位标签：position

包含属性：relative(相对) absolute(绝对)

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

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

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

4.相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右

文章出处：标准之路(http://www.aa25.cn/div_css/905.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=gb2312" />

#menu ul li:hover ul { display:block;}
</style>
<title>纵向二级菜单</title></head>
<body>
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">网页版式布局</a>
<ul>
<li><a href="#">自适应宽度</a></li>
<li><a href="#">固定宽度</a></li>
</ul>
</li>
<li><a href="#">div+css教程</a>
<ul>
<li><a href="#">新手入门</a></li>
<li><a href="#">视频教程</a></li>
<li><a href="#">常见问题</a></li>
</ul>
</li>
<li><a href="#">div+css实例</a></li>
<li><a href="#">常用代码</a></li>
<li><a href="#">站长杂谈</a></li>
<li><a href="#">技术文档</a></li>
<li><a href="#">资源下载</a></li>
<li><a href="#">图片素材</a></li>
</ul>
</div>
</body>
</html>

yangxiaonawzy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css中的相对定位和绝对定位

这几天在看div+css，在网上找到了很多的资料，我都不知道选择哪一个了。这两天在看>，感觉还可以。把今天学习过程中遇到的问题和知识点，给记录下来。首先学习到的是css中的相对定位和绝对定位。定位标签：position包含属性：relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位
复制链接

扫一扫