定位的使用

最新推荐文章于 2024-05-23 11:23:05 发布
最新推荐文章于 2024-05-23 11:23:05 发布
阅读量137 收藏 1
点赞数
分类专栏： CSS3学习笔记 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34771938/article/details/119963905
版权

相对定位

  • 相对定位：盒子可以相对自己原来的位置进行位置调整，称为相对定位。

位置描述词 

  • left 向右移动；right向左移动；top 向下移动；bottom 向上移动。
  • 值可以为负数，即往规定方向相反移动。

相对定位的性质 

  • 相对定位的元素，会在“老家留坑”，本质上仍然是在原来的位置，只不过渲染在新的地方而已，渲染的图形可以比喻成“影子”，不会对页面其他元素产生任何影响。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        div {
            width: 100px;
            height: 100px;
        }

        .v1 {
            background-color: red;
        }

        .v2 {
            position: relative;
            top: 150px;
            left: 200px;
            background-color: green;
        }

        .v3 {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="v1"></div>
    <div class="v2"></div>
    <div class="v3"></div>
</body>

</html>

 

 相对定位的用途

  • 相对定位用来微调元素位置。
  • 相对定位的元素，可以当做绝对定位的参考盒子。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        nav {
            width: 800px;
            height: 40px;
            margin: 20px auto;
        }

        nav ul {
            list-style: none;
        }

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

        nav ul li a {
            display: block;
            width: 100px;
            height: 40px;
            color: white;
            text-decoration: none;
            background-color: orange;
        }

        nav ul li a:hover {
            border-top: 3px solid red;
            /* 使用相对定位微调a标签选中时的位置，使导航栏更加美观 */
            position: relative;
            bottom: 3px;
            background-color: gold;
        }
    </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>
            <li><a href="">导航条</a></li>
            <li><a href="">导航条</a></li>
            <li><a href="">导航条</a></li>
        </ul>
    </nav>
</body>

</html>

绝对定位

  • 绝对定位：盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置。

位置描述词 

  • left 到左边的距离；right到右边的距离；top到上边的距离； bottom到下边的距离。

绝对定位脱离标准文档流

  • 绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对它们进行压盖。
  • 脱离标准文档流的方法：浮动、绝对定位、固定定位。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        div {
            width: 100px;
            height: 100px;
        }

        .v1 {
            background-color: red;
        }

        .v2 {
            position: absolute;
            top: 150px;
            left: 200px;
            background-color: green;
        }

        .v3 {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="v1"></div>
    <div class="v2"></div>
    <div class="v3"></div>
</body>

</html>

 

 绝对定位的参考盒子

  • 绝对定位的盒子并不是永远以浏览器作为基准点。
  • 绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点。这个盒子通常是相对定位的，所以这个性质也叫作“子绝父相”。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .v1 {
            width: 500px;
            height: 500px;
            margin: 10px auto;
            border: 1px solid #000;
            position: relative;
        }

        .v2 {
            width: 300px;
            height: 300px;
            margin: 99px auto;
            border: 1px solid #000;
        }

        .v3 {
            width: 100px;
            height: 100px;
            margin: 99px auto;
            border: 1px solid #000;
        }

        p {
            width: 50px;
            height: 50px;
            background-color: gold;
            /* 绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点。 */
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="v1">
        <div class="v2">
            <div class="v3">
                <p></p>
            </div>
        </div>
    </div>
</body>

</html>

 

 绝对定位的盒子垂直居中 

  • 绝对定位的盒子垂直居中是一个非常实用的技术。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .v1 {
            width: 500px;
            height: 500px;
            margin: 10px auto;
            border: 1px solid #000;
            position: relative;
        }

        .v2 {
            position: absolute;
            width: 300px;
            height: 300px;
            /* 垂直居中 */
            top: 50%;
            margin-top: -150px;
            /* 同类水平居中 */
            left: 50%;
            margin-left: -150px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div class="v1">
        <div class="v2">
        </div>
    </div>
</body>

</html>

 

堆叠顺序z-index属性 

  • z-index属性是一个没有单位的正整数，数值大的能够压住数值小的。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .v1 {
            position: absolute;
            width: 300px;
            height: 300px;
            background-color: #f0f;
            top: 100px;
            left: 100px;
            /* 不设置z-index默认是后面的盒子会将前面的盒子覆盖*/
            /* 这里设置z-index：666大于后面盒子的z-index，所以后面的盒子会被覆盖 */
            z-index: 666;
        }

        .v2 {
            position: absolute;
            width: 300px;
            height: 300px;
            background-color: #0f0;
            top: 300px;
            left: 300px;
            z-index: 66;
        }
    </style>
</head>

<body>
    <div class="v1">
    </div>
    <div class="v2">
    </div>
</body>

</html>

 

绝对定位的用途

  •  绝对定位用来制作“压盖”、“遮罩”效果。
  • 绝对定位用来结合CSS精灵使用。
  • 绝对定位可以结合JS实现动画。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
            position: relative;
        }

        div img {
            width: 500px;
            height: 300px;
        }

        div .bn {
            width: 40px;
            height: 40px;
            position: absolute;
            top: 50%;
            margin-top: -20px;
            text-align: center;
            line-height: 40px;
            text-decoration: none;
            border: 1px solid #000;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, .5);
        }

        div .bn:hover {
            background-color: gold;
        }

        div .leftbn {
            left: 10px;
        }

        div .rightbn {
            right: 10px;
        }
        
        div ol {
            position: absolute;
            bottom: 20px;
            right: 20px;
            width: 120px;
            height: 20px;
            list-style: none;
        }

        div ol li {
            float: left;
            width: 20px;
            height: 20px;
            margin-right: 10px;
            background-color: rgba(255, 255, 255, .5);
            /* 圆形 */
            border-radius: 50%;
        }

        div ol li.checked {
            background-color: gold;
        }
    </style>
</head>

<body>
    <div class="carousel">
        <img src="image/yasuo.jpg" alt="">
        <a href="#" class="leftbn bn">&lt;</a>
        <a href="#" class="rightbn bn">&gt;</a>
        <ol>
            <li></li>
            <li class="checked"></li>
            <li></li>
            <li></li>
        </ol>
    </div>
</body>

</html>

 

固定定位

  • 固定定位：不管页面如何卷动，它永远固定在那里。

  • 固定定位只能以页面为参考点，没有子固父相这个性质。
  • 固定定位脱离标准文档流。
  • 固定定位的用途：“返回顶部”、“楼层导航”。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            position: fixed;
            width: 100px;
            height: 100px;
            bottom: 50px;
            right: 50px;
            background-color: #aff;
        }
    </style>
</head>

<body>
    <img src="image/xiaowu.jpg" alt="">
    <img src="image/xiaowu.jpg" alt="">
    <img src="image/xiaowu.jpg" alt="">
    <img src="image/xiaowu.jpg" alt="">
    <div></div>
</body>

</html>

 

小豪boy
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css相对定位使用示例
09-25
主要介绍了css相对定位使用示例,需要的朋友可以参考下
css教程之绝对定位使用详解
12-13
一.基本概念: 如果说相对定位没有脱离文档流，相对于对象本身进行偏移有点拖泥带水的话，那么绝对定位...可以使用top属性和left属性设置绝对定位对象的偏移量。绝对定位虽然脱离了文档流，但是也需要有定位的参考对象
CSS几种定位方式以及定位的叠放次序z-index，绝对定位的盒子居中算法，定位的特殊特性
ChuanyangChen的博客
10-07 385
CSS几种定位方式以及定位的叠放次序z-index，绝对定位的盒子居中算法，定位的特殊特性 边偏移 top、left、right、bottom属性可以偏移定位 静态定位「默认」 静态定位是元素的默认定位方式，????️定位的意思。 静态定位按照标准流特性摆放位置，它没有边偏移 静态定位在布局时很少用到 相对定位「relative」 相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型） ???? 原来在标准流的位置继续占有（不脱标） 绝对定位「absolute」 如果没有祖先元素「父
z-index和top、left偏移量属性
superman__007的博客
10-26 470
1、只有在我们的网页中我们使用了position来定义我们的网页的时候,才具有z-index和偏移量属性（top、left）。 也就是 说在我们没有给元素使用position定位的时候，元素是没有z-index和偏移量的属性的。所以我们在使用的定位之后，我们一般使用偏移量（top、left） 来移动元素，而没有使用position定位的时候，我们一般使用margin属性，因为没有定位的元素没有
静态、相对、绝对以及固定定位的用法、特点以及作用
qq_52908359的博客
04-24 518
1. 四种定位的特性： 定位 参考物 特点 static 默认 默认 相对定位relative 定位前的位置 1.不影响元素本身特性 2.元素不脱离文档流 3.相对于原位置进行偏移 绝对定位 absolute 最近的使用了定位的父级，如果没有找body 1.元素脱离文档流 2.行元素支持所有css样式 3.块元素内容撑开高度 4.清楚子级浮动 固定
4-12固定定位的用途顶部导航栏
liu1992452008的博客http://write.blog.csdn.net/configu
07-18 182
Document * { margin: 0; padding: 0; } .nav { position: fixed; top: 0; left: 0; width: 100%
CSS笔记——z-index
lihaoen666的博客
09-05 574
概念 z-index属性指定了元素及其子元素的层级顺序，通常较大z-index值得元素会覆盖较低的那一个。属性值 z-index: auto； （默认值） z-index: <integer> ; （整数值） z-index: inherit ; （继承） 特性 支持负值； 支持CSS3 animation动画； 在CSS 2.1时代，需要配合定
Android地图定位googleSDK使用
05-04
google地图SKD使用和google定位SDK使用
CSS：你真的会用 z-index 吗？
weixin_34009794的博客
05-30 193
你真的会用 z-index 么？ 如果你的 css 里面存在大量这样的代码： z-index：66、666、999、9999 可能你还不太理解 z-index 复制代码 HTML 元素是处于三维空间中 所有的盒模型元素都处于三维坐标系中，除了我们常用的横坐标和纵坐标，盒模型元素还可以沿着“z 轴”层叠摆放，当他们相互覆盖时，z 轴顺序就变得十分重要。 但“z 轴”顺序，不完全由 z-i...
z-index 无效问题
pzy_666的博客
02-11 949
情景说明 今天有个弹窗组件，弹窗中有个下拉组件，但这个下拉组件下拉开之后，多出的部分，被弹窗组件盖住了 z-index无效的几种情况和解决方案 父元素设置了 overflow:hidden|auto /display:none/ 如果父元素设置了 overflow:hidden /display:none/ 等，那么子元素如果在父元素外部绝对定位，那么调节子元素 z-index 可能不会显示。 .father { display: none; opacity: 0; overflow: hidd
z-index负值深入理解
热门推荐
冰雪为融的博客
07-06 1万+
补充点小知识：CSS3与新时代的层叠上下文：css3之前，可能我们说会影响层叠上下文的也就position属性了，那CSS3时代的到来，对层叠上下文规则带来了新的影响，css3时代会影响层叠上下文的除了定位还有：元素为flex布局元素（父元素display:flex|inline-flex），同时z-index值不为auto元素的opacity值不是1元素transform值不是none元素的fi...
z-index 的最大值和最小值
wangdan_2013的博客
08-21 1万+
z-index的最大值和最小值
z-index属性
qq_36470686的博客
09-27 1757
z-index 属性设置元素的堆叠顺序,z-index的值也可以为负数。 z元素只对定位属性生效，position不能是默认值   注意：拥有更高堆叠顺序的元素并不总是会处于堆叠顺序较低的元素的前面！ z-index只针对于同级的定位元素生效, 不针对父子元素,。 若父元素与子元素z-index值都为正数，就算父元素z-index值大也是在下边。 但是把子元素z-index值设成负值...
matlab里面的命令lefttop,总结css中常见的四个定位属性（left right top bottom）
weixin_29831325的博客
03-18 1004
DIV CSS left right top bottom定位这四个CSS属性样式用于定位对象盒子，必须定义position属性值为absolute或者relative。Left 当前元素的左侧与父元素左侧(就是原来默认位置)的距离值。Right 当前元素的右侧与父元素右侧的距离值。Top 当前对象顶部距离原位置顶部距离多少。Bottom 当前对象底部距离原位置距离多少...
/audio~ 前端音浪来袭：HTML音频&视频标签的深度探索
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-19 729
想要音频自动播放、循环播放，甚至静默加载？小菜一碟：< audio controls autoplay loop preload = " auto " > < source src = " ambient.mp3 " type = " audio/mpeg " > 准备好享受氛围音乐了吗？
【SpringMVC】_SpringMVC项目返回HTML与JSON
m0_63299495的博客
05-22 684
本专栏已介绍：返回静态页面：【Spring MVC】_SpringMVC项目返回静态页面_mvc 返回当前页面-CSDN博客返回数据：【Spring MVC】_SpringMVC项目返回数据-CSDN博客本篇介绍返回HTML与返回JSON；
前端基础入门三大核心之HTML篇：构建网页世界的基石与HTML5的魔力
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-18 911
HTML是一种标记语言，它使用一系列标签来描述网页内容的结构和表现形式。这些标签告诉浏览器如何处理和显示文本、图片、视频等网页元素。从最基础的段落、标题到复杂的表格、表单，HTML都能轻松应对。
超链接的魅力：HTML中的 `＜a＞` 标签全方位探索！
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-19 1162
超链接是互联网的脉络，它不仅仅是一个技术点，更是信息流动的桥梁。今天，我们不仅学习了基础，也探索了高级技巧和最佳实践。但旅程远未结束，超链接的世界还有更多等你去发现。现在轮到你了！在你的项目中实践这些技巧，或者在评论区分享你遇到的有趣超链接应用。让我们携手，让互联网的每一个角落都充满活力与连接！你曾用超链接实现过哪些有趣的交互？或者在超链接使用过程中遇到过哪些坑？分享你的故事，让我们共同成长！🌟欢迎来到我的博客，很高兴能够在这里和您见面！
Html中，想利用JS引入Jquery文件；$.getScript()无效
最新发布
小洪帽i的博客
05-23 259
Html中，想利用JS引入Jquery文件；$.getScript()无效
rtklib定位使用教程
05-10
RTKLIB是一款开源的高精度GNSS定位软件包，可以实现相对定位、静态定位、动态定位、PPP等多种定位模式。下面是RTKLIB基本使用教程： 1. 安装RTKLIB软件包。 2. 准备GNSS数据。 RTKLIB支持多种格式的GNSS数据，如RINEX、UBX、NMEA等，可以通过GNSS接收机或仿真软件生成。在使用RTKLIB进行定位之前，需要将GNSS数据转换为RTKLIB支持的格式。 3. 配置RTKLIB。 打开RTKLIB软件，选择“Options”菜单，进入配置界面。在这里可以设置定位模式、GNSS观测数据格式、接收机型号、坐标系、输出文件等参数。 4. 开始定位。 在RTKLIB主界面，选择“File”菜单，导入准备好的GNSS数据文件。然后选择“Run”菜单，开始进行定位计算。计算完成后，可以在界面上查看定位结果，如位置、速度、精度等。 5. 分析定位结果。 RTKLIB定位结果可以输出到文件中，也可以通过RTKPLOT软件进行可视化分析。通过分析定位结果，可以评估定位精度、误差源、信号质量等信息，并进行后续处理和优化。 以上是RTKLIB的基本使用教程，需要注意的是，RTKLIB对GNSS数据的质量要求较高，需要选用高精度的GNSS接收机，并保证数据采集的环境稳定。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值