手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >子div在父div的相对定位css控制
子div在父div的相对定位css控制
摘要:我们在设计页面的时候会遇到,子DIV要控制在父DIV内部的固定位置,而且还有图层上下的关系。这里有个小技巧。父div的position使用r...

 我们在设计页面的时候会遇到,子DIV要控制在父DIV内部的固定位置,而且还有图层上下的关系。这里有个小技巧。

父div的position使用relative,子div的position使用absolute,然后使用left和top进行定位。

如果子div的position使用了fixed,就不能使用left了,则改成margin-left。

这里说的不清楚,只是记录一下。

代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
 <title>Untitled</title>
</head>
<body>
<div style="width:500px; height:1300px; background:#0f0; margin:0 auto; position: relative;">
 <div style="width:300px; height:30px; background:#f00; position: fixed; _position: absolute; top:30px; margin-left:50px; z-index:100;">test!!!!</div>
Hello World!
<div>
</body>
</html>

【子div在父div的相对定位css控制】相关文章:

如何使用CSS sprites减少HTTP请求

css绝对定位

DIV+CSS常用的网页布局代码

CSS制作网页布局实例:隐藏input文字

详解CSS的相对定位和绝对定位

用CSS轻松实现网上填空

文字排版在网页制作中应遵守的原则

兼容好的css透明代码

div与span的区别

子元素div高度不确定时父div高度如何自适应

精品推荐
分类导航