美文网首页
二十七、定位(上)

二十七、定位(上)

作者: honest涛 | 来源:发表于2021-03-08 21:02 被阅读0次

一、定位

1.1 为什么需要定位

提问:以下情况使用标准流或者浮动能实现吗?
\color{red}{1.某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子}

image.png \color{red}{2.当我们滚动窗口的时候,盒子是固定屏幕某个位置的} image.png 以上效果,标准流或浮动都无法快速实现,此时\color{red}{需要定位来实现}
所以:
1.浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子。
2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。

1.2、定位组成

\color{red}{定位}:将盒子\color{red}{定}在某一个\color{red}{位}置,所以\color{red}{定位也是在摆放盒子,按照定位的方式移动盒子。}
定位 = 定位模式 + 边偏移。
\color{red}{定位模式}用于指定一个元素在文档中的定位方式,\color{red}{边偏移}则决定了该元素的最终位置。

1.2.1 定位模式

定位模式决定元素的定位方式,它通过CSS的\color{red}{position}属性来设置,其值可以分为四个:

语义
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位

1.2.2、静态定位 static(了解)

静态定位是元素的\color{red}{默认定位方式}\color{red}{无定位的意思}

语法:
选择器 { position: static; }

  • 静态定位按照标准流特性摆放位置,它没有边偏移
  • 静态定位在布局时很少用到

1.2.3 相对定位 relative(重要)

\color{red}{相对定位}是元素在移动位置的时候,是相对于它\color{red}{原来的位置}来说的(自恋型)。

语法:
选择器 { position: relative;}

相对定位的特点:(务必记住)
1.它是相对于自己原来的位置来移动的(\color{red}{移动位置的时候参照点是自己原来的位置})。
2.\color{red}{原来}在标准流的\color{red}{位置}继续占用,后面的盒子仍然以标准流的方式对待它。(\color{red}{不脱标,继续保留原来位置})。
因此,相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。

相对定位.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>相对定位</title>
    <style>
        .box1 {
            position: relative;
            top: 100px;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
    <div class="box2">

    </div>
</body>
</html>

1.2.4 绝对定位 absolute(重要)

\color{red}{绝对定位}是元素在移动位置的时候,是相对于它\color{red}{祖先元素}来说的(拼爹型)。

语法:
选择器:{ position:absolute;}

绝对定位的特点:(务必记住)
1.如果\color{red}{没有祖先元素}或者\color{red}{祖先元素没有定位},则以浏览器为准定位(Document文档)。
2.如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置。
3.绝对定位\color{red}{不再占有原先的位置}。(脱标)

绝对定位-无父亲或者父亲无定位.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绝对定位-无父亲或者父亲无定位</title>
    <style>
        .father {
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }
        .son {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>
绝对定位-父级有定位.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绝对定位-父级有定位</title>
    <style>
        .yeye {
            position: relative;
            width: 800px;
            height: 800px;
            background-color: hotpink;
            padding: 50px;
        }
        .father {
          
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }
        .son {
            position: absolute;
            left: 30px;
            bottom: 10px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="yeye">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
</body>
</html>

1.2.5 子绝父相的由来

弄清楚这个口诀,就明白了绝对定位和相对定位的使用场景。
这个“子绝父相”太重要了,是我们学习定位的口诀,是定位中最常用的一种方式这句话的意思是:\color{red}{子级是绝对定位的话,父级要用相对定位}
① 子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子。
② 父盒子需要加定位限制子盒子在父盒子内显示。
③ 父盒子布局时,需要占有位置,因此父亲只能是相对定位。
这就是子绝父相的由来,所以\color{red}{相对定位经常用来作为绝对定位的父级}
总结:\color{red}{因为父级需要占有位置,因此是相对定位,子盒子不需要占有位置,则是绝对定位。}
当然,子绝父相不是永远不变的,如果父元素不需要占有位置,\color{red}{子绝父绝}也会遇到。

1.2.6 固定定位 fixed(重要)

\color{red}{固定定位}是元素\color{red}{固定于浏览器可视区的位置}。主要使用场景:可以在浏览器页面滚动时元素的位置不会改变。

语法:
选择器 { position:fixed;}

固定定位的特点:(务必记住)

  1. 以浏览器的可视窗口为参照点移动元素。
  • 跟父元素没有任何关系
  • 不随滚动条滚动。
  1. 固定定位\color{red}{不在占有原先的位置}
    固定定位也是脱标的,其实固定定位也可以看做是一种特殊的绝对定位。

\color{red}{固定定位小技巧:固定在版心右侧位置。}
小算法:

  1. 让固定定位的盒子 left:50%,走到浏览器可视区(也可以看做版心)的一半位置。
  2. 让固定定位的盒子margin-left:版心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>固定定位小技巧-固定到版心右侧</title>
    <style>
        .w {
            width: 800px;
            height: 1400px;
            background-color: pink;
            margin: 0 auto;
        }
        .fixed {
            position: fixed;
            /* 1. 走浏览器宽度的一半 */
            left: 50%;
            /* 2. 利用margin 走版心盒子宽度的一半距离 */
            margin-left: 405px;
            width: 50px;
            height: 150px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="fixed"></div>
    <div class="w">版心盒子 800像素</div>
</body>
</html>
固定到版心右侧.png

1.2.7 粘性定位 sticky(了解)

\color{red}{粘性定位}可以被认为是相对定位和固定定位的混合。sticky粘性的。

语法:
选择器 { position: sticky;top: 10px;}

粘性定位的特点:

  1. 以浏览器的可视窗口为参照点移动元素(固定定位特点)
  2. 粘性定位\color{red}{占有原先的位置}(相对定位特点)
  3. 必须添加top、left、right、bottom其中一个才有效
    跟页面滚动搭配使用。兼容性较差,IE不支持。

1.2.8 定位的总结

定位模式 是否脱标 移动位置 是否常用
static静态定位 不能使用边偏移 很少
\color{red}{relative相对定位} \color{red}{否(占有位置)} \color{red}{相对于自身位置移动} \color{red}{常用}
\color{red}{absolute绝对定位} \color{red}{否(不占有位置)} \color{red}{带有定位的父级} \color{red}{常用}
\color{red}{fixed固定定位} \color{red}{否(不占有位置)} \color{red}{浏览器可视区} \color{red}{常用}
sticky粘性定位 否(占有位置) 浏览器可视区 当前阶段少

1.一定记住 相对定位、固定定位、绝对定位 两个大的特点:1.是否占有位置(脱标否)2.以谁为基准点移动位置。

相关文章

  • 二十七、定位(上)

    一、定位 1.1 为什么需要定位 提问:以下情况使用标准流或者浮动能实现吗?。 。 以上效果,标准流或浮动都无法快...

  • 2018-03-16找到内容定位的三大方法

    定位屋 -- 定位从观念到体系 第六章 找到定位 我们这里说的定位是内容上的定位,或者是战略上的定位。从内容上...

  • 论产品定位:写作方向确定

    1、 产品定位,在《定位》一书中艾·里斯和杰克·特劳特说到的定位是产品营销上的定位。在我的理解上,产品定位,就是选...

  • #30天专注橙长计划#品牌定位30(4)品牌定位与产品定位

    一、什么是品牌定位? 品牌定位是企业在市场定位和产品定位的基础上,对特定品牌在文化取向及个性差异上的商业性决...

  • 蓝月精灵国   第二十七章   兄妹链

    原创 第二十七章 兄妹链 奥兰塔用圣影定位看了看地图,离永金王都还有74个城邦,大家吃了一...

  • 大纲

    一、本书名称《冒牌死神在行动》 本书定位:男频、现代、玄幻 二、人物介绍 主角:林虹,男,生日二零零二年七月二十七...

  • 《玄门散识》戒规卷☯老君二十七戒

    《玄门散识》戒规卷☯老君二十七戒 老君二十七戒是想尔戒的具体化和世俗化。具体来说,老君二十七戒分为上九戒、中九戒和...

  • 做好园所定位,招生不跑偏!

    词条科普:品牌定位 度娘是这么说的:品牌定位是企业在市场定位和产品定位的基础上,对特定的品牌在文化取向及个性差异上...

  • 再读《定位》

    定位和品牌结合就是品牌定位,就是品牌战略; 定位和品类结合就是品类定位,就是品类战略; 但在本质上只有一种定位,那...

  • day6(定位)

    相对定位 1相对定位是相对自己的原本的位置定位position:relative; 绝对定位 2在父级的基础上的绝...

网友评论

      本文标题:二十七、定位(上)

      本文链接:https://www.haomeiwen.com/subject/wcjyqltx.html