css postion

来源：互联网发布：阿里云架构 java 编辑：程序博客网时间：2024/06/13 14:33

html标签排列

<div id="main"> sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore m<div id="inmain"><h1>Bathtub Hydroponics</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.</p></div></div>

1.只对main定位

#main{position:absolute;top:20px;left:20px;width:419px;border:1px dashed #999999;}

2.main和inmain都绝对

#main{position:absolute;top:20px;left:20px;width:419px;border:1px dashed #999999;}#inmain{position:absolute;top:50px;left:40px;border:1px dashed #999999;}

3.inmain绝对

#main{width:419px;border:1px dashed #999999;}#inmain{position:absolute;top:50px;left:400px;width:419px;border:1px dashed #999999;}

4.main相对，inmain 绝对

#main{position:relative;left:100px;width:419px;border:1px dashed #999999;}#inmain{position:absolute;top:50px;left:20px;border:1px dashed #999999;}

5.main绝对，inmain相对同4