搜索
首页web前端css教程深入浅析了解CSS中定位布局的细节

本篇文章给大家带来了css定位布局的相关知识,下面我们就来看一下什么是相对定位、绝对定位以及固定定位不同的元素性质与用途等知识,希望对大家有帮助。

深入浅析了解CSS中定位布局的细节

1. 相对定位

1.1) 什么是相对定位

相对定位:盒子可以根据自己原来的位置进行位置调整(通过位置描述词实现)。

位置描述词:
left: 向右移动; right 向左移动;top 向下移动;bottom 向上移动
(当里面值为负数的时候,往相反方向移动)

举个例子:
原来:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        p {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            margin: 50px auto;
        }

        p {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            position: relative;
            top: 50px;
            left: 50px;
        }
    </style></head><body>
    <p>
    	<p></p>
    </p></body></html>

在这里插入图片描述
将 p 设置成相对定位:

p {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    position: relative;
    top: 50px;
    left: 50px;}

在这里插入图片描述

1.2)相对定位的性质与用途

性质

  • 相对定位的元素,本质上仍在原来的位置,只不过在新的地方渲染出现,不会对页面其它元素产生影响。

用途

  • 用来微调元素位置
  • 相对定位的盒子可以用来做绝对定位的参考盒子

举个例子:

76c82f278ac045591c9159d381de2c579fd01892b579bba0c343404bcccd70fb93f0f5c25f18dab9d176bd4f6de5d30e
    a80eb7cbb6fff8b0ff70bae37074b813
    db71bb30709ba44a555bb4f052ca6598
    8f6d5a544bbc0d98e0f297ef053f784d
    b2386ffb911b14667cb8f0f91ea547a7相对定位6e916e0f7d1e588d4f442bf645aedb2f
    c9ccee2e6ea535a969eb3f532ad9fe89
        * {
            margin: 0;
            padding: 0;
        }

        nav {
            width: 780px;
            height: 50px;
            margin: 40px auto;
        }

        nav ul {
            list-style: none;
        }

        nav ul li {
            float: left;
            width: 156px;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }

        nav ul li a {
            display: block;
            width: 156px;
            height: 50px;
            background-color: lightcyan;
            color: #000;
            text-decoration: none;
        }

        nav ul li a:hover {
            border-top: 3px solid red;
        }
    531ac245ce3e4fe3d50054a55f2659279c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86d
    c787b9a589a3ece771e842a6176cf8e9
        ff6d136ddc5fdfeffaf53ff6ee95f185
            25edfb22a4f469ecb59f1190150159c6
                f1b3ba8846c179e65eb68da95b01a812导航一5db79b134e9f6b82c0b36e0489ee08ed
            bed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c6
                f1b3ba8846c179e65eb68da95b01a812导航二5db79b134e9f6b82c0b36e0489ee08ed
            bed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c6
                f1b3ba8846c179e65eb68da95b01a812导航三5db79b134e9f6b82c0b36e0489ee08ed
            bed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c6
                f1b3ba8846c179e65eb68da95b01a812导航四5db79b134e9f6b82c0b36e0489ee08ed
            bed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c6
                f1b3ba8846c179e65eb68da95b01a812导航五5db79b134e9f6b82c0b36e0489ee08ed
            bed06894275b65c1ab86501b08a632eb
        929d1f5ca49e04fdcb27f9465b944689
    44f9630a3d507ae7532760da37622b0f36cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e

这个时候效果是这样:
在这里插入图片描述
会发现鼠标悬浮在上面的时候,导航那一块区域都会下沉
我们给它设置了相对定位并微调之后:

nav ul li a:hover {
    border-top: 3px solid red;
    position: relative;
    top: -3px;}

在这里插入图片描述
这样就可以解决刚刚的问题了


2. 绝对定位

2.1) 什么是绝对定位

绝对定位:盒子以坐标进行位置描述,拥有自己绝对位置。

绝对定位的参考盒子:
绝对定位的盒子会以自己的祖先元素中,离自己最近的拥有定位属性的盒子,当做基准点。

这个盒子通常是相对定位的,所以也被称作 “子绝父相”。

位置描述词:
left:到左边的距离;right:到右边的距离;top:到上边的距离;bottom:到下边的距离

举个例子:

76c82f278ac045591c9159d381de2c579fd01892b579bba0c343404bcccd70fb93f0f5c25f18dab9d176bd4f6de5d30e
    a80eb7cbb6fff8b0ff70bae37074b813
    db71bb30709ba44a555bb4f052ca6598
    8f6d5a544bbc0d98e0f297ef053f784d
    b2386ffb911b14667cb8f0f91ea547a7绝对定位6e916e0f7d1e588d4f442bf645aedb2f
    c9ccee2e6ea535a969eb3f532ad9fe89
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: absolute;
            width: 500px;
            height: 300px;
            left: 200px;
            top: 100px;
            background-color: antiquewhite;
        }
    531ac245ce3e4fe3d50054a55f2659279c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86d
    9890cd3db8af2c13be66110fccb4c149
    94b3e26ee717c64999d7867364b1b4a336cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e

2.2)绝对定位的性质与用途

绝对定位的盒子垂直居中:

.box {
	position: absolute;
	top: 50%;
	margin-top: -自己高度一半;}

绝对定位的盒子水平居中:

.box {
	position: absolute;
	left: 50%;
	margin-left: -自己宽度一半;}
  • 堆叠顺序 z-index 属性

设置绝对定位元素的压叠顺序.
是一个没有单位的正整数,数值大的能够压住数值小的(即数值大的显示在上层)

举个例子:

76c82f278ac045591c9159d381de2c579fd01892b579bba0c343404bcccd70fb93f0f5c25f18dab9d176bd4f6de5d30e
    a80eb7cbb6fff8b0ff70bae37074b813
    db71bb30709ba44a555bb4f052ca6598
    8f6d5a544bbc0d98e0f297ef053f784d
    b2386ffb911b14667cb8f0f91ea547a7绝对定位6e916e0f7d1e588d4f442bf645aedb2f
    c9ccee2e6ea535a969eb3f532ad9fe89
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 300px;
            height: 300px;
            position: absolute;
            left: 100px;
            top: 100px;
            background-color: antiquewhite;
        }

        .box2 {
            width: 300px;
            height: 300px;
            position: absolute;
            left: 200px;
            top: 200px;
            background-color: lightblue;
        }
    531ac245ce3e4fe3d50054a55f2659279c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86d
    270a51b956a23b98a0f876f9d602125c94b3e26ee717c64999d7867364b1b4a3
    fb95984df8f79ab56a41c584a417d18a94b3e26ee717c64999d7867364b1b4a336cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e

此时效果如下:

<br/>

这个时候我们想让box1显示在上层,就设置一个z-index 属性。

.box1 {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 100px;
    top: 100px;
    background-color: antiquewhite;
    z-index: 100;}.box2 {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 200px;
    top: 200px;
    background-color: lightblue;
    z-index: 1;}

看看效果:
在这里插入图片描述

  • 用途

绝对定位用来“压盖”,“遮罩”的效果
可以结合 CSS 精灵使用
可以结合 JS 实现一些动画

3. 固定定位

3.1) 什么是固定定位

固定定位:不管页面如何滚动,它永远以页面为参考点,固定在那里。

位置描述词:
left:到左边的距离;right:到右边的距离;top:到上边的距离;bottom:到下边的距离

.box {
	position: fixed;
	top: 100px;
	left: 100px;}

3.2)固定定位的性质与用途

可以用来实现一些元素要一直浮现在当前窗口前,比如浏览一个页面时的返回顶部按钮,会一直出现在当前页面的某个位置

举个例子:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            
            text-align: center;
            line-height: 40px;
            border-radius: 50%;
            background-color: rgba(78, 209, 226, 0.5);
            
            cursor: pointer;
            font-size: 24px;
        }
    </style></head><body>
    <a class="box">^</a>
    <p>
        <img src="https://dummyimage.com/600x400/00bcd4/fff" alt="">
    </p>
    <p>
        <img src="https://dummyimage.com/600x400/00bcd4/fff" alt="">
    </p>
    <p>
        <img src="https://dummyimage.com/600x400/00bcd4/fff" alt="">
    </p></body></html>

效果如下:
当页面到下方时,右下角返回顶部的按钮位置不变。
在这里插入图片描述

大家感兴趣的话,可以继续访问:css视频教程

以上是深入浅析了解CSS中定位布局的细节的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
利用CSS怎么创建渐变色边框?5种方法分享利用CSS怎么创建渐变色边框?5种方法分享Oct 13, 2021 am 10:19 AM

利用CSS怎么创建渐变色边框?下面本篇文章给大家分享CSS实现渐变色边框的5种方法,希望对大家有所帮助!

css ul标签怎么去掉圆点css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM

在css中,可用list-style-type属性来去掉ul的圆点标记,语法为“ul{list-style-type:none}”;list-style-type属性可设置列表项标记的类型,当值为“none”可不定义标记,也可去除已有标记。

css与xml的区别是什么css与xml的区别是什么Apr 24, 2022 am 11:21 AM

区别是:css是层叠样式表单,是将样式信息与网页内容分离的一种标记语言,主要用来设计网页的样式,还可以对网页各元素进行格式化;xml是可扩展标记语言,是一种数据存储语言,用于使用简单的标记描述数据,将文档分成许多部件并对这些部件加以标识。

css3怎么实现鼠标隐藏效果css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM

在css中,可以利用cursor属性实现鼠标隐藏效果,该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状,当属性值设置为none时,就可以实现鼠标隐藏效果,语法为“元素{cursor:none}”。

css怎么实现英文小写转为大写css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM

转换方法:1、给英文元素添加“text-transform: uppercase;”样式,可将所有的英文字母都变成大写;2、给英文元素添加“text-transform:capitalize;”样式,可将英文文本中每个单词的首字母变为大写。

rtl在css是什么意思rtl在css是什么意思Apr 24, 2022 am 11:07 AM

在css中,rtl是“right-to-left”的缩写,是从右往左的意思,指的是内联内容从右往左依次排布,是direction属性的一个属性值;该属性规定了文本的方向和书写方向,语法为“元素{direction:rtl}”。

css怎么设置i不是斜体css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM

在css中,可以利用“font-style”属性设置i元素不是斜体样式,该属性用于指定文本的字体样式,当属性值设置为“normal”时,会显示元素的标准字体样式,语法为“i元素{font-style:normal}”。

怎么设置rotate在css3的旋转中心点怎么设置rotate在css3的旋转中心点Apr 24, 2022 am 10:50 AM

在css3中,可以用“transform-origin”属性设置rotate的旋转中心点,该属性可更改转换元素的位置,第一个参数设置x轴的旋转位置,第二个参数设置y轴旋转位置,语法为“transform-origin:x轴位置 y轴位置”。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
1 个月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器