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

2025-01-19 云资源网 前端开发教程 已收录 关注 13次
当前位置：云资源网 > 技术教程 > 前端开发教程 > 深入浅析了解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）相对定位的性质与用途

性质

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

用途

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

举个例子：

<!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;
        }

        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;
        }
    </style></head><body>
    <nav>
        <ul>
            <li>
                <a href=#>导航一</a>
            </li>
            <li>
                <a href=#>导航二</a>
            </li>
            <li>
                <a href=#>导航三</a>
            </li>
            <li>
                <a href=#>导航四</a>
            </li>
            <li>
                <a href=#>导航五</a>
            </li>
        </ul>
    </nav></body></html>

这个时候效果是这样：

会发现鼠标悬浮在上面的时候，导航那一块区域都会下沉
我们给它设置了相对定位并微调之后：

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

这样就可以解决刚刚的问题了

2. 绝对定位

2.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;
        }

        .box {
            position: absolute;
            width: 500px;
            height: 300px;
            left: 200px;
            top: 100px;
            background-color: antiquewhite;
        }
    </style></head><body>
    <p class=box>
    </p></body></html>

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

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

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

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

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

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

举个例子：

<!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;
        }

        .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;
        }
    </style></head><body>
    <p class=box1></p>
    <p class=box2></p></body></html>

此时效果如下：


这个时候我们想让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中定位布局的细节的详细内容，更多请关注双恒网络其它相关文章！

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！

云资源网 » 深入浅析了解CSS中定位布局的细节

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？
本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
提示下载完但解压或打开不了？
最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。 若排除这种情况，可在对应资源底部留言，或 联络我们.。
你们有qq群吗怎么加入？
当然有的，如果你是帝国cms、易优cms、和pbootcms系统的爱好者你可以加入我们的QQ千人交流群https://sudo1.com/page-qun.html。

云资源网 钻石

喜欢 0
分享到：

相关推荐

  • 会员数(个)
  • 12275资源数(个)
    •        
  • 资源(G)
    •        
  • 今日下载
  • 1364稳定运行(天)

提供最优质的资源集合

立即查看 了解详情