css中的position实例-优快云博客

本文详细介绍了使用CSS进行网页布局的方法，包括如何实现元素的居中显示、相对定位及绝对定位。通过具体示例展示了不同定位方式的效果及其应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码

<html>
<head>
<style type="text/css">
body
{
text-align:center;   /*使它的子元素div居中*/
/*如果它的子元素不指定text-align的话，那么它的子元素的text-align属性值就会继承他的父元素的text-align属性值。在这里就是text-align为center*/
}
.a
{
    border:1px solid #000099;
    margin:20px;
    width:900px;
    height:700px;
    margin-left:auto;/*这句CSS居中的意思就是让div自己调整左右margin间隔的距离以达到水平居中的效果。*/
    margin-right:auto;
    text-align:left;
}
.b
{
    background-color:#99FF66;
    width:600px;
    height:500px;
    position:relative;  /*relative是相对于自己来定位的，例如：#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px。*/
    top:50px;
    left:50px;
}
.c
{
    background-color:#FF0099;
    width:300px;
    height:300px;
    position:absolute;
    /*
      如果这里position设置为absolute，那么它的父元素的position要设置为relative,否则它的位置将会相对于body而言。
    */
    top:20px;
    left:20px;
}
</style>
</head>
<body>
<div class="a">
  我是a
  <div class="b">
  我是b
      <div class="c">
      我是c
      </div>
  </div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/yangruipretty/archive/2010/05/12/1734011.html