CSS中的定位(详解)

OK,关于CSS的选择器,样式已经说完了。到了定位这一块。
定位是为了更好的完成网页中元素的布局,也就是说你想让这一个节点出现在什么位置,就要用到定位。
介绍就不说太多,直接开始正文。

一、CSS 相对定位

设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。

    <!-- 相对定位 -->
    <style>
        #div1{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
<body>
    <div id="div1">div1</div>
</body>

这样的一个div应该在网页的左上角。
在这里插入图片描述
然后我们给它加个定位。

    <style>
        #div1{
            width: 200px;
            height: 200px;
            background-color: blue;
            position: relative;
            top: 30px;
            left: 30px;
        }
    </style>

在这里插入图片描述
这里有个值得注意的是,看我操作,如果我们再加一个div的话。

<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
</body>

然后给它加个样式。

    <style>
        #div1{
            width: 200px;
            height: 200px;
            background-color: blue;
            position: relative;
            top: 30px;
            left: 30px;
        }
        #div2{
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }
    </style>

我们来看一下效果。
在这里插入图片描述
可以看到,虽然div1移动了,但是它原先所占据的空间还在那里,别的元素你用不了。这也就是刚才在开始我加粗的那句话的意思。
所以我们要注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

二、CSS 绝对定位

设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

那加粗的这句话什么意思呢**:绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。**

我们来用例子来说明:
我们再加一个div3:

<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
</body>

然后加上样式。

    <style>
        #div3{
            width: 200px;
            height: 200px;
            background-color: brown;
        }
    </style>

如果我们不加定位的话,现在他应该在最下面对吧。
在这里插入图片描述
如果我们加上相对定位先来看看是什么样子的。

    <style>
        #div3{
            width: 200px;
            height: 200px;
            background-color: brown;
            position: relative;
            top: 50px;
            left: 50px;
        }
    </style>

这就应该是,相对于现在的自己定位吧。
在这里插入图片描述
没啥毛病,那我们再来看一下绝对定位。

    <style>
        #div3{
            width: 200px;
            height: 200px;
            background-color: brown;
            position: absolute;
            top: 50px;
            left: 50px;
        }
    </style>

这个时候我们来分析一下,刚才说过绝对定位相对于最近已经定位的父元素定位,这里面div3没有父元素,是不是就应该相对于body定位,也就是网页定位。
在这里插入图片描述
你看,确实没啥毛病。
因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序

这是什么意思呢,你看我给div3加上一个属性。

    <style>
        #div3{
            width: 200px;
            height: 200px;
            background-color: brown;
            position: absolute;
            top: 50px;
            left: 50px;
            z-index: -1;
        }
    </style>

我们再来看一下:
在这里插入图片描述
div3就跑下面去了。

三、固定定位

关于定位我们再说一个固定定位。
fixed
元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。

什么意思呢,就比如你现在看我的博客,你要进行滑动来翻页,那么如果一个元素被fixed定位了,不管你怎么滑动,他都相对于窗口位置不变。
如果想有滑轮,那么我们就要把body的height设置的大一点:

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            height: 2000px;
        }
    </style>

然后我们再来一个div4;

    <!-- 固定定位 -->
    <style>
        #div4{
            width: 100px;
            height: 100px;
            background-color: cadetblue;
            position: fixed;
            right: 50px;
            bottom: 50px;
        }
    </style>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
    <div id="div4">div4</div>
</body>

我们来看一下效果:
在这里插入图片描述
然后我们把滑轮向下拉:
在这里插入图片描述
可以看到,右下角的div4还是不动。这就是固定定位。

四、CSS浮动

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

关于这两句话,我们要记住那个加粗的字体,然后还有就是要记住浮动会脱离文档流。

我们来例子说明:

    <style>

        #float1,#float2,#float3{
            width: 100px;
            height: 100px;
            background-color: chartreuse;
            margin-bottom: 5px;
    }
        #float1{
            float: right;
        }
    </style>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
    <div id="div4">div4</div>
    <div id="float1">浮动1</div>
    <div id="float2">浮动2</div>
    <div id="float3">浮动3</div>
</body>

可以看到我给后面三个div都加了一个相同的样式,然后我让第一个div浮动到最右边,是不是只有碰到边缘框他才会停下来。而且第一个还会脱离文档流,后面的两个要把第一个的位置补上。

在这里插入图片描述
就像这个样子,那我们想一下,如果我们给这三个元素都加上一个浮动。会是什么样子呢?

    <style>
        #float1,#float2,#float3{
            width: 100px;
            height: 100px;
            background-color: chartreuse;
            margin-bottom: 5px;
            float: left;
    }
    </style>

我们来看一下效果:
在这里插入图片描述
看到没,这回能理解开始加粗的那句话了吧,除了碰到文档的边缘框浮动会停止,还有就是碰到其他 浮动元素的时候也会停下来。

那这个东西我们可以应用在哪里呢。

<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
    <div id="div4">div4</div>
    <div id="float1">浮动1</div>
    <div id="float2">浮动2</div>
    <div id="float3">浮动3</div>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
</body>

我们在后面加上一个ul,里面有三个li,是不是应该竖着有三个li。
如果我们给它浮动。

    <style>
        #float1,#float2,#float3{
            width: 100px;
            height: 100px;
            background-color: chartreuse;
            margin-bottom: 5px;
            float: left;
    }
        ul li{
            list-style: none;
            float: left;
        }
    </style>

我们来看一下效果:
在这里插入图片描述
哎?竟然横过来了,所以神奇吧,以后在网页中有那种横着一排文字的,就可以用li的浮动来解决。

OK,关于CSS中的定位,就说这些吧,最后再附上我的笔记吧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            height: 2000px;
        }
    </style>
    <!-- 相对定位 -->
    <style>
        #div1{
            width: 200px;
            height: 200px;
            background-color: blue;
            position: relative;
            top: 30px;
            left: 30px;
        }
        #div2{
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }
    </style>
    <!-- 绝对定位 -->
    <style>
        #div3{
            width: 200px;
            height: 200px;
            background-color: brown;
            position: absolute;
            top: 50px;
            left: 50px;
            z-index: -1;
        }
    </style>
    <!-- 固定定位 -->
    <style>
        #div4{
            width: 100px;
            height: 100px;
            background-color: cadetblue;
            position: fixed;
            right: 50px;
            bottom: 50px;
        }
    </style>
    <!-- 浮动 -->
    <style>
        #float1,#float2,#float3{
            width: 100px;
            height: 100px;
            background-color: chartreuse;
            margin-bottom: 5px;
            float: left;
    }
        ul li{
            list-style: none;
            float: left;
        }
    </style>
</head>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
    <div id="div4">div4</div>
    <div id="float1">浮动1</div>
    <div id="float2">浮动2</div>
    <div id="float3">浮动3</div>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
</body>
</html>
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页