CSS静态定位，相对定位，绝对定位，固定定位，粘性定位233

最新推荐文章于 2022-10-19 18:49:09 发布
最新推荐文章于 2022-10-19 18:49:09 发布
阅读量231 收藏
点赞数
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luojunjie1999/article/details/107412255
版权

CSS定位
在这里插入图片描述
定位模式：
在这里插入图片描述
边偏移：
在这里插入图片描述
静态定位（了解）：
在这里插入图片描述

相对定位（重要）：

在这里插入图片描述

        .box1{
            position: relative;
            top: 50px;
            bottom: 50px;
            left: 50px;
            right: 50px;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

绝地定位（重要）

在这里插入图片描述

        .father{
            position: relative;
            width: 500px;
            height: 500px;
            background-color: yellow;
        }
        .son{
            position:absolute;
            top:10px;
            bottom: 10px;
            left: 100px;
            right: 200px;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

子绝父相：子类用绝对定位，父类用相对定位。
在这里插入图片描述
案例：

    <style>
        .father {
            position: relative;
            float: left;
            width: 250px;
            height: 200px;

        }
        .father  em {
            position:absolute;
            top: 4px;
            right: 13px;
        }
    </style>

</head>
<body>
    <div class="father">
        <div class="pic">     
            <img src="images/pic.png" alt="">
            </div>
        <em>
            <img src="images/hot.png" alt="">
        </em>
    </div>
</body>

在这里插入图片描述

4.固定定位

在这里插入图片描述
固定定位在版心右侧小技巧
在这里插入图片描述

    <style>
        .w{
            width: 1000px;
            height: 1000px;
            background-color: yellow;
            margin: 0 auto;
        }
        .fixed{
            position: fixed;
            bottom: 5px;
            left: 50%;
            margin-left: 505px;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="fixed"> 固定内容</div>
    <div class="w">版心内容</div>
</body>

5.粘性定位（了解）
在这里插入图片描述

定位总结

在这里插入图片描述

IE吃饭
关注
【CSS笔记】CSS布局之五种定位方式（静态、相对、绝对、固定、粘性）
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
08-18 5724
设置元素的【position】属性值等于【absolute】绝对定位之后，如果没有设置【top，left、right、bottom】属性，那么就会默认都是0，这个时候元素就会移动到浏览器屏幕可见区域的左上角位置。relation相对定位，这个属性是相对于元素自身位置定位的，也就是说，某个元素使用相对定位之后，它是以没有使用相对定位之前显示的位置为参考点，上下左右移动多少距离，下面看个案例。CSS也支持相对于某个元素，进行绝对定位，也就是说，可以自定义当前元素是以哪个元素为参考点，从而完成绝对定位。...
CSS定位——静态定位、绝对定位、相对定位、固定定位、粘性定位
qq_43623147的博客
12-12 1298
定位 一、为什么需要定位？ 定位可以让盒子自由地在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。标准流或浮动都无法快速实现。 二、定位组成 定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。 定位=定位模式+边偏移 定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。 1. 定位模式 用于指定一个元素在文档中的定位方式。 通过CSS的position属性来设置，有四个值 值 语义 static 静态定位.
【HTML】CSS入门教程---基本布局定位流(相对定位+绝对定位+固定定位+粘性定位)
hnspystqxskzlqc的博客
03-25 1244
目录 一、相对定位 二、绝对定位 三、固定定位 四、粘性定位 五、总结 (接上一期知识，咱们继续讲解。) 一、相对定位 relative：可以理解为相对于自身定位 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ....
定位全解(绝对，相对，固定，粘性定位)
DangR_Jisoo的博客
11-24 1565
定位全解(绝对，相对，固定，粘性定位) 一. 绝对定位(position: absolute) 绝对定位是元素在移动的时候，相对于其父亲来说的(拼爹型)，若无父元素，按其祖先元素，如其父元素或祖先元素无定位，则以浏览器为主 元素设置绝对定位后，不再占有原来的位置，其他的元素会涌上来，而且设置绝对定位会压住下面的标准流 <style> * { margin: 0; padding: 0; }
css定位大汇总
warriordwu的博客
07-02 321
1.定位介绍 1.1为什么使用定位 利用定位，可以精准地将元素摆放到任何位置。摆放的位置可以相对于其父元素、另一个元素或者是浏览器本身的位置。 1.2定位组成 定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子 定位也是用来布局的，它有两部分组成： 定位 = 定位模式 + 边偏移 定位模式 用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。 1.2.1边偏移 边偏移 就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性
定位 静态定位
weixin_73326433的博客
08-18 381
定位
position设置定位属性 absolute绝对定位 fixed固定定位 relative相对定位 sticky粘性定位 z-index设置定位元素的层叠顺序 锚点链接 透明
Lgw_zuiyouxiu的博客
07-17 795
1.position 设置定位属性 static 默认值，没有定位，静态定位，相对没有属性position属性的元素都是static定位 2.absolute 绝对定位 会使元素脱离文档流，不需要去解决 绝对定位会产生一个块级框，不管之前是何种元素，都可以设置宽高 包含块：根据距离其最近的具有定位设置的父元素进行位置的偏移， 静态定位除外，如果所有的父元...
CSS 元素定位详解与实战应用
最新发布
10-09
本文详细讲解了 CSS 中多种元素定位的方法及其应用场景，具体涉及静态定位(static)，相对定位(relative)，绝对定位(absolute)，固定定位(fixed)以及粘性定位(sticky)，同时解释了每种定位方式的工作机制和相关属性...
css默认定位、相对定位、绝对定位、粘性定位、固定定位及其特点
m0_65450343的博客
05-31 578
<!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>...
【CSS】定位--静态定位-相对定位-绝对定位-子绝父相-固定定位-粘性定位
YK菌的博客
12-06 2951
文章目录1. 为什么需要2. 定位组成定位 = 定位模式 + 边偏移2.1 定位模式2.2边偏移3. 静态定位 static （了解）4. 相对定位 relative （重要）5. 绝对定位 absolute （重要）6. 子绝父相的由来子级使用绝对定位，父级则需要相对定位相对定位经常用来作为绝对定位的父级因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到6. 固定定位 fixed （重要）小技巧：固定版心右侧位置7.
CSS基础(18)_相对定位、绝对定位、固定定位、粘滞定位
no15870678621的博客
04-08 916
CSS各种定位介绍
static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位)
热门推荐
qq_44939011的博客
07-20 1万+
static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位) Position的取值： static(静态定位) : 表示块保留在原本应该在的位置，不会重新定位。 fixed（固定定位）：元素就被固定不会随着滚动条的拖动而改变位置。 relative(相对定位) ：相对定位是通过将元素从原来的位置向上、向下、向左或者向右移动来定位的。 absolute(绝对定位)：绝对定位，是相对于最近的且不是static定位的父元素来定位。 1.static(静
CSS 定位（静态、固定、相对、绝对、粘性）
Ares5k
04-08 772
静态定位、固定定位、相对定位、绝对定位、粘性定位
CSS中的静态定位 固定定位 绝对定位和相对定位
qq_43685389的博客
11-15 2815
CSS中的静态定位 固定定位 绝对定位和相对定位
五种定位、静态定位、相对定位、绝对定位、固定定位、粘性定位、实现元素水平垂直居中的方法
CIA的博客
07-30 517
static 默认值 静态定位，相当于没有加 relative 相对定位 参考物: 元素自己本身的位置 移动方向和移动距离： left/top/right/bottom:数值px; (和设置的方向形成距离为正，交叉为负数) absolute 绝对定位 参考物: 有(1)定位属性的(除默认的静态定位之外)(2)祖先元素 参考物特殊情况 (1) 如果要移动的元素的祖先元素很多都加了定位属性，那就参考离该元素最近的 (2) 如果祖先元素都没有加定位属性，那就参考浏览器窗口 移动方式和距离: lef
定位（静态定位、绝对定位、相对定位、固定定位）
qq_45929209的博客
12-01 1898
定位静态定位绝对定位相对定位固定定位 静态定位 缺省时，即为静态定位 静态定位是指各个元素在html文档流中应有的位置，根据HTML超文本传输协议，浏览器在接受和解析网页时，是遵循从上往下来显示的 静态定位时，无法通过left、right、top、bottom来设定元素的位置 绝对定位 代码如下（示例）： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>&lt
CSS布局之定位—静态定位—相对定位—绝对定位—子绝父相—固定定位—定位元素的层级关系—案例（重：水平垂直居中）
小琳爱分享的博客
07-23 900
CSS布局之定位—静态定位—相对定位—绝对定位—子绝父相—固定定位—定位元素的层级关系—案例（重：水平垂直居中）
CSS定位布局：静态定位、相对定位、绝对定位、固定定位、粘滞定位、Z-index定位
qq_51066068的博客
03-18 5474
目录 1.定位布局 1.1.静态定位（ Static positioning） 简单代码实现： - 1.2.什么是相对定位?（ Relative positioning ） 简单代码实现： - 1.3.什么是绝对定位?（Absolute positioning） - 绝对定位参考点 效果图： -绝对定位水平居中 - 1.4.固定定位（Fixed positioning） - 1.5.粘滞定位（ Sticky positioning ） position: sticky; ...
HTML里元素定位的介绍与基本应用
L20220927Y的博客
10-19 509
HTML里元素定位的介绍与基本应用
CSS position属性详解：绝对定位与相对定位
粘性定位在某些情况下类似静态定位，但在特定条件下（如滚动到某个点）会变为类似固定定位。这使得元素可以在页面滚动时保持在视口的特定位置，直到超出其容器边界。这种定位方式在较新的浏览器中得到支持。 理解...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值