css定位

发表于 | 分类于 | 热度: ℃ |
字数统计: 2,216字 | 阅读时长 ≈ 10分钟

文档流概念

文档流，是指盒子按照 HTML 标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。

一. 定位

把某一个标签, 安置到某一个位置去, 这个过程称为定位

1. 定位分类:

我们可以使用 CSS 的 position 属性来设置元素的定位类型，position 的设置项如下：

  • static 默认值. 没有定位: 元素出现在正常的流中(忽略top, bottom, left, right 或者 z-index 声明)

  • relative 生成相对定位元素，一般是将父级设置相对定位，子级设置绝对定位，子级就以父级作为参照来定位，否则子级相对于body来定位。

  • absolute: 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。

  • fixed: 生成固定定位的元素，相对于浏览器窗口进行定位。

    元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

定位元素的偏移

定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。

1. 相对定位:

相对定位是相对于该元素在文档流中的原始位置,即以自己原始位置为参照物. 有趣的是: 即使设置了元素的相对定位以及偏移值, 元素还占有原来的位置, 即占据文档流的空间.对象遵循正常文档流, 但依据 top, left, right, bottom等属性在正常文档流中偏移位置. 而其层叠通过 z-index 属性定义

注意: position: relative 的主要用法是: 方便绝对定位元素找到参照物.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
CSS部分: 
<style>
    .con {
        width:300px;
        height:300px;
        border:1px solid black;
        margin:0px auto;
    }

    .con div {
        width:200px;
        height:70px;
        margin:10px;
    }

    .box01 {
        background:lightgreen;
        /* 设置相对定位 */
        position:relative;
        left:50px;
        top:50px;
    }

    .box02 {
    	background: lightskyblue
    }

    .box03 {
    	background: lightpink;
    }
</style>


HTML部分:
<!-- .con>.box01+.box02+.box03 -->
<div class="con">
    <div class="box01">1</div>
    <div class="box02">2</div>
    <div class="box03">3</div>
</div>

2. 绝对定位:

定义: 设置为绝对定位的元素框从文档流完全删除, 并相对于最近的已定位祖先元素定位, 如果元素没有已定位的祖先元素,那么他的位置相对于最初的包含块( 即body元素 ). 元素原先在正常文档流中所占的空间会关闭, 就好像该元素原来不存在一样. 元素定位后生成一个块级框, 而不论原来它在正常流中生成何种类型的框.

重点: 如果父级设置了 position 属性, 例如: position: relative, 那么子元素就会以父级的左上角为原点进行定位. 这样能很好的解决自适应网站的标签偏离问题, 即父级为自适应, 那我子元素就设置position:absolute; 父元素设置position: relative; 然后top, bottom, right, left 用百分比宽度表示.

总结: 参照物用相对定位, 子元素用绝对定位, 并且保证相对定位参照物不会偏移即可.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<style>
    .con{
        width:300px;
        height:300px;
        border:1px solid black;
        margin:0px auto;
        /* 父级设置为相对定位，不设置偏移，子级就可以以它为参照做绝对定位 */
        position: relative;
        /* 设置父级的溢出隐藏 */
        overflow: hidden;
    }

    .con div{
        width:200px;
        height:70px;
        margin:10px;
    }

    .box01{
        background:lightgreen;
        /* 设置绝对定位 */
        position:absolute;
        left:131px;
        top:50px;
    }

    .box02{
    	background: lightskyblue
    }

    .box03{
    	background: lightpink;
    }
</style>


HTML部分:
<!-- .con>.box01+.box02+.box03 -->
<div class="con">
    <div class="box01">1</div>
    <div class="box02">2</div>
    <div class="box03">3</div>
</div>

3. 固定定位

fixed: 对象脱离正常文档流, 使用 top, right, bottom, left等属性以窗口为参照点进行定位, 当出现滚动条时, 对象不会随着滚动.

而其层叠通过 z-index 属性定义.

注意点: 一个元素若设置了 position: absolute | fixed; 则该元素就不能设置 float. 这是一个常识性知识点, 因为这是两个不同的流, 一个是浮动流, 另一个是 定位流. 但是 relative 却可以. 因为它原本所占的空间仍然占据文档流.

理论上, 被设置为 fixed 的元素会被定位于浏览器敞口的一个指定坐标, 不论窗口是否滚动, 他都会固定在这个位置.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<style>
    .con{
        width:300px;
        height:300px;
        border:1px solid black;
        margin:0px auto;
    }

    .con div{
        width:200px;
        height:70px;
        margin:10px;
    }

    .box01{
        background:lightgreen;
        /* 设置固定定位 */
        position:fixed;
        right:131px;
        bottom:50px;
    }

    .box02{
    	background: lightskyblue
    }

    .box03{
    	background: lightpink;
    }
</style>

HTML部分:
<!-- .con>.box01+.box02+.box03 -->
<div class="con">
    <div class="box01">1</div>
    <div class="box02">2</div>
    <div class="box03">3</div>
</div>

2. 元素层级

绝对定位元素是浮动在正常的文档流之上的，可以用 z-index 属性来设置元素的层级

例如:

Snipaste_2018-08-09_21-07-22.png

伪代码如下:2

1
2
3
4
5
6
7
.box01{
    ......
    position:absolute;  /* 设置了绝对定位 */
    left:200px;         /* 相对于参照元素左边向右偏移200px */
    top:100px;          /* 相对于参照元素顶部向下偏移100px */
    z-index:10          /* 将元素层级设置为10 */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
CSS部分: 
<style>
    .con{
        width:300px;
        height:300px;
        border:1px solid black;
        margin:0px auto;
        position: relative;
    }

    .con div{
        width:200px;
        height:70px;
        margin:10px;
        position:absolute;
    }

    .box01{
        background:lightgreen;
        left:0px;
        top:0px;

        /* 设置定位元素的层级 */
        z-index:6;
    }

    .box02{
        background: lightskyblue;
        left:30px;
        top:30px;
        z-index:7;
    }
    .box03{
        background: lightpink;
        left:60px;
        top:60px;
        z-index:8;
    }
</style>

HTML部分: 
<!-- .con>.box01+.box02+.box03 -->
<div class="con">
    <!-- 如果不设置z-index属性，定位元素的层级安装代码书写的顺序，先写的排列在下面，后写的排列在上面 -->
    <div class="box01">1</div>
    <div class="box02">2</div>
    <div class="box03">3</div>
</div>

3. 练习: 用固定定位创建弹窗

Snipaste_2018-08-09_21-08-39.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<style>
    .pop{
        width:500px;
        height:300px;
        border:1px solid black;
        background:white;
        position: fixed;

        /* 弹框水平垂直居中的写法： */
        left:50%;
        top:50%;
        margin-left:-251px;
        margin-top:-151px;
        /* 设置弹框的层级,设置比较大的值，盖住其他所有的元素*/
        z-index:9999;
    }
    .pop h3{
        margin:5px;
        background: lightskyblue;
        line-height:40px;
    }

    .mask{
        position:fixed;
        left:0px;
        top:0px;
        width:100%;
        height:100%;
        background:black;
        z-index:9998;

        /* 设置背景的透明度 */
        opacity:0.3;
        /* 透明度兼容写法，兼容IE */
        filter:alpha(opacity=30);

    }

    /* 设置pop_con的隐藏，可以同时将弹框和背景隐藏起来 */
    .pop_con{
        display:none;
    }  
</style>

HTML部分:
<h1>网页内容</h1>
<div class="pop_con" style="display:block">
    <div class="pop">
        <h3>弹框标题</h3>
        <p>弹框的文字内容</p>
    </div>
    <div class="mask"></div>
</div>

二. 页面嵌套

在一个页面中可以开一个局部的窗口，嵌入另外一个页面

制作这样的功能我们一般使用: iframe 标签来实现

1
2
3
4
5
使用方法: 

<iframe src="" frameborder="">

</iframe>
  • src: 设置另一个网页的地址
  • frameborder: 设置这个局部窗口边框的粗细

提升:

iframe 可以和 a 标签搭配使用, 呈现切换的效果:

我们知道 a 标签有 target 属性:

target=”_blank” : 新开一个浏览器窗口显示链接的页面

如果 target 的值和 iframe 的 name 值保持相同, 则 a 标签切换后的 href 将作用到 iframe 的 src 上:

1
2
3
4
5
<a href="001.html" target="name">001页面</a>
<a href="002.html" target="name">002页面</a>
<a href="003.html" target="name">003页面</a>

<iframe src="001.html" frameborder="0" name="name"></iframe>

三. 元素居中显示技巧

1. 居中显示:

Snipaste_2018-08-09_21-08-05.png

想要使某个元素能够居中显示, 需要设置其 margin 属性为: 0px auto:

1
2
3
4
5
6
7
8
9
10
11
12
CSS部分:
<style>
.box{
    width: 300px; 
    height: 300px;
    background: gold;
    margin:0px auto;
}
</style>

HTML部分: 
<div class="box"></div>

总结:

  • 如果想要某个元素居中, 则需要设置他的 margin : 0px auto;
  • 多个元素想要居中, 则每个单独的元素都需要设置该属性.
  • margin: 0px auto; =====> margin: 0px auto 0px auto; (上, 右, 下, 左)
------ 本文结束------
坚持原创技术分享，您的支持将鼓励我继续创作！
0%