CSS四种定位-静态定位和相对定位

最新推荐文章于 2024-09-04 22:33:02 发布
最新推荐文章于 2024-09-04 22:33:02 发布
阅读量185 收藏
点赞数
分类专栏： CSS 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WangZhang_521/article/details/122276191
版权
本文介绍了CSS中的相对定位，它是布局中重要的定位方式。通过设置`position: relative;`及`top`和`left`属性，可以调整元素相对于其正常位置的位置。示例展示了如何使用相对定位来改变<div>元素的位置。
摘要由CSDN通过智能技术生成

01-静态定位

布局中很少用到，了解即可

02-相对定位（重要）

<!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>
        .box1 {
            /* 定位模式 */
            position: relative;
            /* 边偏移 */
            top: 100px;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        .box2 {
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

效果展示

在这里插入图片描述

WangZhang_521
关注
专栏目录
【CSS笔记】CSS布局之五种定位方式（静态、相对、绝对、固定、粘性）
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
08-18 5755
设置元素的【position】属性值等于【absolute】绝对定位之后，如果没有设置【top，left、right、bottom】属性，那么就会默认都是0，这个时候元素就会移动到浏览器屏幕可见区域的左上角位置。relation相对定位，这个属性是相对于元素自身位置定位的，也就是说，某个元素使用相对定位之后，它是以没有使用相对定位之前显示的位置为参考点，上下左右移动多少距离，下面看个案例。CSS也支持相对于某个元素，进行绝对定位，也就是说，可以自定义当前元素是以哪个元素为参考点，从而完成绝对定位。...
CSS-静态定位，相对定位，绝对定位，固定定位的用法和区别详解
weixin_44486539的博客
10-05 2113
CSS 提供了三种基本的定位机制：普通流、浮动和定位；通过这三种方式可实现页面的排版布局 普通流 普通流中的元素的位置由元素在 (X)HTML 中的位置决定 块级元素独自占一行，在文本流中从上到下一个接一个地排列 行内元素在一行中并排排列，遇到父元素的边沿会换行继续排列 浮动 浮动会让元素脱离标准文档流，不再占原来的空间，可以让多个块级元素并排显示 定位 定位是将元素定在某个位置，...
静态定位相对定位
jjlome的博客
11-21 384
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> .box1 { position: relative; top: 100px;
5.1 CSS静态定位
最新发布
Python老吕的博客
09-04 840
静态定位（Static Positioning）是所有元素的默认定位方式，它表示元素按照正常的文档流进行布局，即元素的位置由HTML中的顺序决定，不受CSS定位属性的影响。通过理解静态定位与其他定位方式的比较和应用，开发者可以根据项目需求选择合适的定位技术，创建出既美观又功能丰富的网页布局。静态定位的这些示例代码展示了如何在不使用显式定位属性的情况下，通过外边距、内边距和盒模型的其他属性来创建整洁和有序的布局。静态定位是所有HTML元素的默认定位方式，它决定了元素在页面上的默认布局行为。
CSS静态定位法
weixin_52634719的博客
10-27 219
position:static
CSS静态定位和绝对定位
m0_46744635的博客
08-19 269
css静态定位详解,CSS中的定位方式，相对、绝对、固定、静态，瞬间搞懂
weixin_35385462的博客
08-04 721
码农公社 210.net.cn210是何含义？10月24日是程序员节，1024 =210、210既210之意。定位??position一、基本概念1、CSS定位属性允许您定位元素。它还可以将元素放置在另一个元素之后，并指定当元素的内容太大时应该怎么做。2、可以使用top，bottom，left，right属性定位元素。但是，首先要设置position属性，否则这些属性将不起作用。二、静态定位...
【CSS】定位--静态定位-相对定位-绝对定位-子绝父相-固定定位-粘性定位
YK菌的博客
12-06 2961
文章目录1. 为什么需要2. 定位组成定位 = 定位模式 + 边偏移2.1 定位模式2.2边偏移3. 静态定位 static （了解）4. 相对定位 relative （重要）5. 绝对定位 absolute （重要）6. 子绝父相的由来子级使用绝对定位，父级则需要相对定位相对定位经常用来作为绝对定位的父级因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到6. 固定定位 fixed （重要）小技巧：固定版心右侧位置7.
CSS相对，绝对，固定，静态定位和显示效果——每天一遍小知识
01-08
前言 这是我在这个网站整理的笔记，...静态定位——static3.固定定位——Fixed Positioning4.相对定位——Relative Position5. 绝对定位——Absolute Position6.自我总结，代码效果 一.显示属性——display 1.块元素—
什么是css绝对定位与相对定位,CSS相对定位与绝对定位
weixin_39664136的博客
08-04 1172
1.相对定位Position : relative ;特点：1 如果没有定位偏移量，对元素本身没有任何影响；2 不使元素脱离文档流，空间是会被保留；3 不影响其他元素布局；4 left、top、right、bottom是相对于当前元素自身进行偏移的。代码：初始效果为三个方形并列向下，对box2添加了相对定位，box2相对于本身left: 100px，发生位移后，box2实际占位为偏移前的原位置而非...
CSS【详解】定位 position （静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky）
朝阳39的博客
07-07 1343
依据最近一层的定位元素（position 值为 absolute/relative/fixed 的元素）定位，若无定位元素，则依据 body 定位。必须配合 left,right,top,bottom 一起使用，否则元素还在原文档流的位置。必须配合 left,right,top,bottom 一起使用，否则元素还在原文档流的位置。黏性定位元素的父元素高度不能和黏性定位元素的高度相同（否则没有实现黏性效果的空间）父元素相对定位，子元素绝对定位，常用于实现子元素重叠在父元素上。
CSS定位中的静态定位和相对定位
weixin_47267628的博客
12-25 834
静态定位（static）了解 静态定位是元素的默认定位方式，无定位的意思 语法： 选择器： {position: static;} 静态定位按照标准流特性摆放位置，它没有边偏移 静态定位在布局时很少用到 意思就是：静态定位就是标准流的方式 相对定位（reative）重要 相对定位是元素在移动位置的时候，是相对它原来的位置来说的（相对于自己） 语法： 选择器： {position: relative;} 相对定位的特点（务必记住） 它是相对自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
【CSS】定位 ② ( 静态定位 | 相对定位 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-11 619
一、静态定位 二、相对定位 1、标准流下的盒子模型代码示例 2、相对定位下的盒子模型代码示例
定位（静态定位、绝对定位、相对定位、固定定位）
qq_45929209的博客
12-01 1904
定位静态定位绝对定位相对定位固定定位 静态定位 缺省时，即为静态定位 静态定位是指各个元素在html文档流中应有的位置，根据HTML超文本传输协议，浏览器在接受和解析网页时，是遵循从上往下来显示的 静态定位时，无法通过left、right、top、bottom来设定元素的位置 绝对定位 代码如下（示例）： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>&lt
static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位)
热门推荐
qq_44939011的博客
07-20 1万+
static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位) Position的取值： static(静态定位) : 表示块保留在原本应该在的位置，不会重新定位。 fixed（固定定位）：元素就被固定不会随着滚动条的拖动而改变位置。 relative(相对定位) ：相对定位是通过将元素从原来的位置向上、向下、向左或者向右移动来定位的。 absolute(绝对定位)：绝对定位，是相对于最近的且不是static定位的父元素来定位。 1.static(静
css相对定位，绝对定位，static定位
翟浩浩Android专栏
10-25 1572
http://www.w3school.com.cn/css/css_positioning.asp--> html> html> head lang="en"> meta charset="UTF-8"> title>title> style> *{ padding: 0; margin: 0;
浅谈CSS四大定位：static&relative&absolute&fixed
liangxz0311的专栏
03-30 1060
position属性有四个值，分别是静态定位(static)、相对定位(relative)、绝对定位(absolute)、固定定位(fixed)，默认position值是static。 使用默认定位值的static效果。 <DOCTYPE html /> <html> <title>position定位</title> <style type="text/css"> *{padding:0
CSS之⑳静态/相对定位·总结
笔岸柳影
02-17 449
CSS之⑳静态/相对定位·总结 QQ:3020889729 小蔡定位属性（包括模式属性和边偏移属性）定位的实现的最基本组成静态定位使用展示相对定位使用展示静态/相对定位的总结 ...
理解CSS定位：相对定位与绝对定位详解
"这篇文章主要探讨了CSS中的position属性，特别是相对定位（relative）和绝对定位（absolute）的概念和用法。作者通过实例解释了这两个定位方式的差异，并着重讲解了它们相对于什么进行定位。" 在网页设计中，CSS的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值