(前端)html与css css 22、定位

定位

css布局：盒模型、浮动、定位、这些都是最重要的布局属性。

辅助功能属性：a、文本、背景等等，为了让页面更加美观。

定位：相对定位、绝对定位、固定定位。

概念：元素位置相对于某一参考物进行的位置的偏移。

脱标：浮动、绝对定位、固定定位。

1、相对定位

相对定位：元素相对于自身进行的位置偏移。

position：定位属性。

属性值：relative，相对的。

偏移的数据量：方向属性控制，top、right、bottom、left。

代码↓

<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin-bottom: 10px;
        }
        .box{
            background-color: skyblue;
            position: relative;
            left: 100px;
            top: 110px;

        }
    </style>
</head>
<body>
    <div>1</div>
    <div class="box">2</div>
    <div>3</div>
    <div>4</div>
</body>
</html>

View Code

未添加相对定位前效果图↓

添加相对定位后效果图↓

有一个相对定位属性↓

position: relative;
left: 100px;
top: 110px;

元素偏移方向与属性方向是相反的(属性值为正)，我写的属性left100px 其实就是元素向右偏移，top110是以为我加了个10px的下边距。

方向判断：如果属性值为正，偏移方向与属性方向相反↓

right: 100px;   向左偏移100px   
left: 100px;    向右偏移100px
top: 100px;     向下偏移100px
bottom: 100px;  向上偏移100px

如果属性值为负值，偏移方向与属性方向相同↓

right: -100px;   向右偏移100px   
left: -100px;    向左偏移100px
top: -100px;     向上偏移100px
bottom: -100px;  向下偏移100px

水平和垂直方向可以选择任何一个方向属性进行搭配。

特点：显示的位置是偏移后的位置，原位置保留，没有被其他元素给占有，类似灵魂出窍，肉体在原位，灵魂脱离。

相对定位不会让元素脱离标准流，标准流的位置还是他自己的。

用途不是很多，但是也有自己的特殊用途：

①结构比较稳定，常拿来做绝对定位的参考元素，子绝父相。

②微调↓

<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            font-size: 18px;
        }
        div span{
            font-size: 12px;
            position: relative;
            bottom: 8px;
        }
    </style>
</head>
<body>
    <div>相对定位微调<span>[1]</span>哈哈哈哈哈哈
    </div>
</body>
</html>

View Code

效果图↓

可以看到“后面的文字”依然在[1]后面排列，常见于百度百科。

微调练习案例

... ... ...

(前端)html与css css 22、定位

定位

1、相对定位

猜你喜欢