position

已于 2022-04-11 22:39:14 修改
阅读量60 收藏
点赞数
分类专栏： # CSS 文章标签： css
于 2021-08-13 21:51:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46048542/article/details/119679578
版权

position
元素的位置也由顶部，底部，左侧和右侧属性控制。
请添加图片描述

relative 相对定位

relative - 相对于其正常位置定位。不影响其他元素布局，不使元素脱离文档流，因此，样式 “left:-20px” 从元素的原始左侧位置减去 20 像素。样式 “left:20px” 向元素的原始左侧位置增加 20 像素。left，top，right，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>Document</title>
    <style>
     /*    #box1{width: 100px;height: 100px;background: red;}
        #box2{width: 100px;height: 100px;background:blue;margin-left: 100px;margin-top: 100px;}
        #box3{width: 100px;height: 100px;background: yellow;margin-top: -100px;} */
        #box1{width: 100px;height: 100px;background: red;}
        #box2{width: 100px;height: 100px;background:blue;position: relative;/* 相对定位 */left: 100px;top: 100px;}
        #box3{width: 100px;height: 100px;background: yellow;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>
</html>

在这里插入图片描述

absolute绝对定位

**absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位，意思是如果没有定位祖先元素相当于整个文档发生偏移。1 使元素完全脱离文档流。2 使内联元素支持宽高（让内联span元素具备块特性).3 使块元素（div）默认宽根据内容决定

<!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>Document</title>
    <style>
        #box1{width: 100px;height: 100px;background-color: red;position: absolute;}
        #box2{width: 200px;height: 200px;background-color: blue;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

在这里插入图片描述

<!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>Document</title>
    <style>
        #box1{width: 300px;height: 300px;border: 1px black solid;margin: 200px;}
        #box2{width: 100px;height: 100px;background-color: blue;position: absolute;right: 0;top: 0;}
    </style>
</head>
<body>
    <div id="box1">
          <div id="box2"></div>
    </div>
</body>
</html>

在这里插入图片描述

<!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>Document</title>
    <style>
        #box1{width: 300px;height: 300px;border: 1px black solid;margin: 200px;position: relative;}
        #box2{width: 100px;height: 100px;background-color: blue;position: absolute;right: 0;top: 0;}
    </style>
</head>
<body>
    <div id="box1">
          <div id="box2"></div>
    </div>
</body>
</html>

在这里插入图片描述

fixed固定定位

fixed固定定位1 使元素完全脱离文档流。2 使内联元素支持宽高（让内联span元素具备块特性).3 使块元素（div）默认宽根据内容决定4相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响

<!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>Document</title>
    <style>
        body{height: 2000px;}
        div{position: fixed;right: 0;}
    </style>
</head>
<body>
    <div>这是一个块</div>
</body>
</html>

在这里插入图片描述

sticky黏性定位

sticky黏性定位

<!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>Document</title>
    <style>
        body{height: 2000px;}
        div{background-color: blue;position: sticky;top: 0;}
    </style>
</head>
<body>
   <p>aaaaaa</p>
   <p>aaaaaa</p>
   <p>aaaaaa</p>
   <div>这是一个人</div>
   <p>aaaaaa</p>
   <p>aaaaaa</p>
   <p>aaaaaa</p>
</body>
</html>

请添加图片描述

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .header{
            background-color: yellow;
            width: 100%;
            height: 100px;
        }
        .nav{
            background-color: red;
            width: 500px;
            height: 50px;
            margin: 0 auto;
            position: sticky;
            top: 50px;
        }
        .body{
            height: 1000px;
            background: green;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="nav"></div>
    <div class="body"></div>
</body>
</html>

请添加图片描述

定位的下拉菜单

定位的下拉菜单

<!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>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        ul{list-style: none;}
        #menu{width: 100px;height: 30px;margin: 20px auto;border: 1px black solid;position: relative;}
        #menu ul{width: 100px;border: 1px black solid;position: absolute; left: -1px;top: 30px; background: white;
        display: none;} 
        #menu:hover ul{display: inline/* block */;}
        #menu ul li:hover{background: red;}
        p{text-align: center;}
    </style>

</head>
<body>
    <div id="menu">卖家中心
        <ul>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
            <li>列表项4</li>
        </ul>
    </div>
    <p>晏青篁</p>
</body>
</html>

在这里插入图片描述

定位实现元素集中

定位实现元素集中

<!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>Document</title>
    <style>
        #box1{width: 300px;height: 300px;border: 1px black solid;position: relative;}
        #box2{width: 100px;height: 100px;background: red;position: absolute;left: 50%;top: 50%;margin: -50px 0 0 -50px;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
</html>

在这里插入图片描述

三角形案列

<!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>Document</title>
    <style>
        .box{
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-indent: 20px;
            background-color: lightblue;
            color: white;
        }
        span{
            width: 0;
            height: 0;
            display: inline-block;
            border: 5px solid transparent;
            border-top: 5px solid black;
            position: relative;
            top: 2.5px;
        }
        div:hover  span{
            border: 5px solid transparent;
            border-bottom: 5px solid black;
            top: -2.5px;
        }
    </style>
</head>
<body>
    <div class="box">
        导航
        <span></span>
    </div>
</body>
</html>

请添加图片描述

定位里层级

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>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
        }
        .box1{
            background: yellow;
            position: relative;
            top: 100px;
            left: 100px;
            z-index: 10;
            /* 层级 */
        }
        .box2{
            background-color: red;
            position: relative;
            z-index: 2;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

请添加图片描述

绝对定位的深入探索

父子关系，在父盒子z-index: 0;失效
倘若父盒子不动，子盒子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>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: relative;
            z-index: 0;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 10px;
            left: 10px;
            /* z-index: -100; */
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="child"></div>
    </div>
</body>
</html>

请添加图片描述
兄弟关系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>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
            top: 100px;
            left: 100px;
            z-index: 1;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
</head>
<body>
    <div class="box1"> </div>
    <div class="box2"></div>
</body>
</html>

请添加图片描述

如何让一个行内元素转换为块元素

如何让一个行内元素转换为块元素
请添加图片描述

<!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>Document</title>
    <style>
        span{
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
        }
    </style>
</head>
<body>
    <span>
        裂开
    </span>
</body>
</html>

请添加图片描述

定位控制元素实现水平垂直居中

top: 50%;
left: 50%;是以父元素设置为一半，此时需要在子元素里设置为自身一半。

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            height: 500px;
            background-color: yellow;
            margin: 0 auto;
            position: relative;
        }
        .child{
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="child"></div>
    </div>
</body>
</html>

请添加图片描述

定位与浮动区别

float:半脱离，文字环绕
absolute:全脱离，不会出现文字环绕效果

<!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>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .box2{
            width: 300px;
            height: 300px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis eaque dicta incidunt fugit vitae facilis error commodi perspiciatis soluta aperiam illo consequatur vero nihil ut minus quisquam dolorum, corrupti consectetur.
    </div>
</body>
</html>

请添加图片描述

九阈
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
position定位详解
JavaKing222的博客
11-22 8113
版权声明：转    https://blog.csdn.net/czw2010/article/details/8741365 我们先来看看CSS3 Api中对position属性的相关定义： static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。  relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性...
position定位
m0_62351590的博客
01-07 8570
position定位都有哪些: position的含义是指定位类型，取值类型可以有：static、relative、absolute、 fixed、inherit、和sticky,这里sticky是css3新发布的一个属性。 1.position: static(默认） static属性为默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）.元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会
css详解position五种属性用法及其含义
前端学习笔记
04-12 1万+
position（定位） position — 作为css属性三巨头（position、display、float）之一，它的作用是用来决定元素在文档中的定位方式。其属性值有五种，分别是 — static（正常定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）、sticky（粘性定位）。 static（正常定位） static(正常定位) 是元素position属性的默认值，包含此属性的元素遵循常规流1。 正常定位呈现常规流的示例html代码： <!DOCTYP
已解决UnicodeDecodeError: ‘gbk‘ codec can‘t decode byte 0xac in position 2: illegal multibyte sequence
04-04 6万+
编码问题通常在处理文本时会出现，特别是当使用不兼容的编码格式时。
position:fixed 固定定位
asdfgv2022的博客
08-03 5万+
元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：特性特性：1.元素脱离正常文档流，不占位(也脱离文本流，全脱)2.始终相对于浏览器窗口四个角为原点进行固定定位的3.不会随页面的内容滚动而滚动4.能使不能设置宽高的行级元素设置宽高5.提升层级6.如果没有定位偏移属性，对元素本身有影响；应用场景：相对于窗口定位的元素如弹窗、跟随滚动的导航、侧边栏...
position：relative
weixin_44874595的博客
07-30 4万+
1.当将块的position属性设置为relative时，与设置为absolute完全不同，这时子块是相对于其父块来作为参照对象偏移定位，而不是相对于浏览器窗口，并且相对定位的块元素脱离标准流浮上来后，无论是否进行移动，其所占的位置仍然留有空位，后面的无定位块元素不会移动上来，因此，移动元素会导致覆盖其它框。 <!DOCTYPE html> <html lang="en">...
python编码报错：UnicodeDecodeError: ‘utf-8‘ codec can‘t decode byte 0xbc in position 2: invalid start byt
热门推荐
sunflower_sara的机器学习园地
01-13 18万+
UnicodeDecodeError: 'utf-8' codec can't decode byte 0xbc in position 2: invalid start byte 解决问题 UnicodeDecodeError: 'utf-8' codec can't decode byte 0xc0 in position 2: invalid start byte</font&...
CSS中position详解
木习习的博客
06-26 2万+
一些关于定位和叠加的理解 一、position属性 position有5个值，分别为static，relative，absolute，fixed，sticky。 1.1 static static是position的默认属性，元素会按正常的文档流进行排序，不会受到top，bottom，left，right的影响。 1.2 relative relative相对定位的元素会较正常文档流中的位置进...
html中position属性默认值,CSS position 属性总结
weixin_34369789的博客
06-04 4322
CSS的position总是属性很容易让人弄混~为了仔细区别它们，所以今天总结一下CSS的position属性~下面是总结内容~有疏漏、错误之处敬请指出！o(^▽^)o一、简介定义：position属性规定元素的定位类型。说明：这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对定位或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏...
Visual C++ POSITION用法解释，POSITION是什么？
Txwtech笛克特科
05-02 4054
POSITION是MFC模板类库中经常使用的一个数据类型，我们从它的定义可以看出，其实，它就是一个指针。 // abstract iteration position struct __POSITION { }; typedef __POSITION* POSITION; MFC给出的注释是：一个抽象的迭代位置，既然是抽象，也就是没有给定具体的数据类型，以满足不同的模板参数的需要。 在C...
block与position
02-26
.wkpf,.wkpf1{ font-family:"微软雅黑"; font-size:13px; line-height:30px; text-decoration:none; color:#818183;}1866次浏览 评价：好中差  块级元素大家对块级元素必定都相当熟悉了，但我们这里还是...
css position 定位
01-19
如果下面的文字实在是无法理解透，那就记住这节课最后总结的一句话“如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的...
position图片定位
01-12
position:relative;margin:50px 0 0 50px;float:left;} .bg span{display:block;width:25px;height:25px;background:url(images/tu.gif) no-repeat left bottom;position:absolute;left:20px;bottom:20px;} .bg p{...
RecyclerView滑动到指定Position的方法
08-30
主要为大家详细介绍了RecyclerView滑动到指定Position的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
css中position:fixed实现div在窗口上下左右居中
09-25
实现div居中的方法有很多，本例介绍的使用css中position:fixed来实现div的上下左右居中，下面以一个DIV 元素在浏览器窗口居中为例
css-垂直居中的几种写法
xxuxioxx的博客
05-27 323
垂直居中的几种写法
CSS 媒体查询 响应式开发
生产队的驴
05-27 283
媒体查询（Media Queries）是CSS3的技术，可以根据设备的特性（如屏幕宽度、高度、方向等）来应用不同的样式规则。媒体查询可以使网页在不同设备上呈现不同的样式，以实现响应式设计。
CSS实现一个雨滴滑落效果
云加速
05-28 376
这只是一个非常基础的示例，真实的雨滴滑落效果可能需要更复杂的动画和可能的JavaScript交互来实现更逼真的效果，比如雨滴的大小、速度、下落路径的随机性等。如果你想要一个更复杂的动画效果，你可能需要考虑使用SVG、Canvas或者WebGL等技术，并结合JavaScript来实现。使用纯CSS来实现一个真实的雨滴滑落效果可能会有些挑战，因为CSS主要关注于静态样式和简单的动画效果。然而，你可以使用CSS动画和@keyframes来模拟一个雨滴滑落的简化效果。这个示例中的雨滴是一个简单的圆形元素。
了解CSS中的link和@import引入CSS的区别
最新发布
祈澈菇凉
05-28 118
【代码】了解CSS中的link和@import引入CSS的区别。
ByteBuffer position
04-10
ByteBuffer是Java NIO中的一个类，用于处理字节数据。position是ByteBuffer的一个属性，...可以通过调用ByteBuffer的position()方法获取当前位置的索引值，也可以通过调用position(int newPosition)方法设置新的位置。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值