何时相对何时绝对?

来源:13-9 Relative与Absolute组合使用

死之外科医生

2017-03-01 08:58

为什么第一个用相对第二个用绝对

写回答 关注

3回答

  • raymond_lk
    2017-03-01 09:11:35
    已采纳

    相对和绝对都是在元素中定义的。都是元素与其父元素的关系。

    box1相对于父元素body是听从父元素body的流动布局的安排的。

    box2相对于父元素box1是告诉父元素:请按照这个绝对位置安排我。

    死之外科医生

    非常感谢!

    2017-03-14 09:39:27

    共 2 条回复 >

  • raymond_lk
    2017-03-01 15:57:47

    div是块元素,单独占一行。

    position:relative表示他要针对自身在父元素中的位置进行定义,并且这个定义是相对于其自身原来位置的。

    top和left表示偏移量。

  • 死之外科医生
    2017-03-01 12:22:45

    http://img.mukewang.com/58b64c770001d2c913440610.jpg

    <!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=utf-8" />

    <title>案例</title>

    <style type="text/css">

    div{

    border:red 1px solid;

    }

    #box1{

    width:200px;

    height:200px;



    position:relative;

    top:10px;

    left:10px;

    }

    #box2{

    width:200px;

    height:200px;


    position:relative;

    top:10px;

    left:10px;

    }

    </style>

    </head>


    <body>

    <div id="box1"></div>

    <div id="box2"></div>

    </body>

    </html>


    _蜡笔小新_

    你想问为什么两个会叠在一起,还是为什么他们中间没有空隙,还是别的? div是块级元素,两个不用css设置肯定会一上一下。 relative的作用是相对之前的位置移动(相对于父元素,这里两个div的父元素是body),你把position,top,left去掉,他的位置就是他本来所在的位置。把position,top,left用回来后偏移多少就是多少

    2017-03-14 10:58:54

    共 1 条回复 >

初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1225811 学习 · 18234 问题

查看课程

相似问题