手机
当前位置:查字典教程网 >网页设计 > 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透明代码

div+css垂直居中的五种实现方法

div与span的区别

div在firefox ie 水平居中对齐

css的三种定位方式使用探讨

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

文字环绕图片的布局效果

学用CSS之HTML结构化

CSS在IE与Firefox下的兼容性

css div绝对定位与固定定位实例

精品推荐
分类导航