css相对定位理解

最新推荐文章于 2024-07-18 20:06:09 发布
最新推荐文章于 2024-07-18 20:06:09 发布
阅读量131 收藏 1
点赞数 1
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hollowmam/article/details/108554365
版权

如果相对定位的两个元素是在同一个父元素下，则后面这个元素会受到前面的元素的影响，即被前面的元素挤到下面去。

一文读懂css【css3】绝对（absolute）定位和相对（relative）定位 相对定位是相对谁定位的 绝对定位又是根据谁绝对定位的 子绝父相 包含块
念兮为美
07-31 6169
我们在开发的过程中，经常会使用到相对定位和绝对定位，但我们有时对这两个定位不是很熟悉，往往会弄混，分不清什么是相对定位，什么又是绝对定位。那么，这篇文章便详细解说他们的区别。相对定位是元素相对其起始位置的定位，那么什么是起始位置呢？绝对定位是相对包含块来定位的，那么，那么什么又是包含块？我们清楚，绝对定位有子绝父相这个词，那么，它是什么意思呢？这里的所有疑问，都会在这篇文章中，讲的非常清楚...
css定位机制原理详解(标准流&定位&浮动)
Sunday97的博客
07-22 2004
一、css定位机制 1、分为普通流（标准流），浮动、绝对定位 （1）普通流:默认状态是元素从左往右。从上往下的排列，也就是说标准流中元素的位置是由它在HTML中的位置决定的 块级元素特性： 块级元素大多为结构性标记 独占一行 可以设置宽高 如果不设置宽高，宽度默认为容器的100% 块级元素有div,p,h1~h6,ul,ol,li,dl(定义列表),dt,dd，table,form,hr(水平分...
相对定位
qq_35367566的博客
09-01 308
这种（按钮相对框）直接采用相对定位即可， <style> .context .text1{ background-color: pink; width: 400px; height: 400px; } .context .btn{ position: re...
深入剖析CSS的相对定位
bwf_erg的博客
03-22 284
CSS中的定位有三种，分别是相对定位、绝对定位、固定定位。 相对定位： 1 position:relative; 绝对定位： 1 position:absolute; 固定定位： 1 position:fixed;   一. 认识相对定位 1.相对定位，就是微调元素位置的。让元素相对自
相对定位与绝对定位
最新发布
st03zy的博客
07-18 1156
行内元素变成块元素， 此时所有的元素宽和高默认都是内容撑开的。5. 设置了相对定位的元素，本身的性质不会改变， 块依旧是块元素，行内依旧是行内元素。2. 设置了绝对定位的元素会脱离文档流，如果下面的兄弟没有设置浮动或者定位则向上移动。如果设置了绝对定位，那么该元素是相对于距离他最近的设置了相对定位的祖先块元素。如果所有的祖先块元素都没有设置定位，那么就是相对html这个根元素来说的。3. 设置了绝对定位的元素的位置是相对于所在的包含块。4. 设置了相对定位的元素提高了自己的层级。
详解CSS的相对定位和绝对定位
sinolover的专栏
01-19 666
CSS的相对定位和绝对定位 一、Static 静态定位 通常情况下，我们元素的position属性的值默认为static 就是没有定位，元素出现在正常的文档流中，这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的，不会生效，比如你设置一个距离左边距偏移100px的声明：left:100px 那么这条声明不会起到任何效果。还有z-index属性在这时也不...
css 相对定位 绝对定位 浮动 分析
09-25
相对定位是CSS定位的基础，它允许元素在不改变其在正常文档流中的位置的情况下进行微调。当一个元素被设置为相对定位，通过`position: relative;`，我们可以使用`left`、`right`、`top`和`bottom`属性来调整元素相...
div+css相对定位和绝对定位用法实例详解
09-25
理解并熟练掌握相对定位和绝对定位是成为CSS布局高手的关键步骤。通过实践和实验，你可以创造出富有创新性和功能性的网页设计。无论是简单的文字布局还是复杂的交互式界面，CSS定位都是实现这些设计的基础工具。
HTML+css基础入门学习教程之CSS 相对定位
01-20
CSS中的定位机制包括静态定位、相对定位、绝对定位和固定定位。在这里，我们将主要探讨相对定位，它是初学者必须掌握的基础概念。 相对定位（Relative Positioning）是一种允许元素在原有位置基础上进行偏移的定位...
JS+CSS相对定位实现的下拉菜单
10-23
接下来，我们将探讨使用JavaScript和CSS的相对定位技术来实现下拉菜单的具体方法。 首先，CSS部分为下拉菜单设置了样式，并使用了绝对定位（position: absolute;）来确定下拉菜单的位置。在上述代码中，#menu 被...
CSS绝对定位（absolute）、相对定位（relative）方法（详解）
热门推荐
Z_CH8648的博客
11-23 3万+
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。 position 属性指定了元素的定位类型，用于指定一个元素在文档中的定位方式。
css定位详解（相对定位、绝对定位和固定定位）
qq_38473254的博客
05-15 1万+
文章目录一、什么是定位？二、各个属性值的作用1、相对定位2、绝对定位3、静态定位4、固定定位三、相对和绝对定位1、相对定位2、绝对定位3、相对定位和绝对定位（1）相对定位（2）绝对定位四、相对、绝对定位与浮动1、相对定位2、绝对定位3、浮动4、相对定位与浮动5、绝对定位和浮动五、z-index的使用六、小结 一、什么是定位？ css中的position属性，position有四个值：relative（相对定位）、absolute（绝对定位）、static（静态定位）和fixed（固定定位），通过top、le
css 绝对定位和相对定位
每天学习一点点
11-10 9247
绝对定位 绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素，基于绝对定位的元素不占据空间。 绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定位的元素没有已定位的祖先元素做参考值，则相对于整个网页。 实例1： <!DOCTYPE html> <html lang="en"> <head> &l...
绝对定位和相对定位详解
langyixuan的博客
05-14 1万+
一：绝对定位 position: absolute;绝对定位：绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。 绝对定位与文档流无关，所以它们可以覆盖页面上其他的元素，可以通过z-index属性来控制这些层的对方顺序。 #box_relative { position: absolute; left: 30px; top: 20px; } 二：相对定位 position: relative
h5--------相对定位，绝对定位
学习是我快乐， 吗
07-13 8930
相对定位效果图&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; .box1{ width: 200px;
css中绝对定位和相对定位的区别
qq_43621905的博客
03-06 550
一：绝对定位 position: absolute;绝对定位：绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。 绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存时一样，所以 它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层...
CSS 元素的定位之相对定位 position: relative
歪脖先生的博客
02-21 1万+
定位在CSS中，通过 position属性来对元素进行定位，可选的定位类型有 static | relative | absolute | fixed，默认值为 static，表示没有定位，元素保持在它原本应该在的位置上。要对页面元素使用定位技术，必须 position属性设置为 static 之外的其它 3 个属性值，即相对定位、绝对定位、固定定位。相对定位当一个元素的 position属性设置...
相对定位、绝对定位与固定定位
weixin_46704556的博客
05-05 3696
1. 定位 1.1 相对定位（relative) ​ 相对定位是元素在移动位置的时候，是相对于它原来的位置来说的; 特点： ​ 它是相对于自己原来的位置来移动的（移动位置的时候是参照点是自己原来的位置）； ​ 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来的位置） { position: relative; top: ; left: ; right: ; bottom: ; } 1.2 绝对定位（absolute)（子绝父相）
css中的绝对定位和相对定位（详解，总结）
weixin_33882443的博客
01-05 1039
css中的绝对定位和相对定位（详解，总结） 总结： 设置绝对定位或者相对定位后都从文档中浮起来了，区别是相对定位还占着原来的位置，绝对定位不占着原来的位置，可以种z-index来改变元素的浮动的堆叠次序。   详讲： 浏览器默认状态下position的属性默认值是static也就是没有定位，元素出现在正常的文档流中，这个时候给元素设置的left，right、bottom、top这些偏移属...
理解CSS相对定位与DIV布局
"本文主要介绍了`相对定位`在`DIV+CSS`布局中的应用，以及`DIV`和`CSS`的基本概念和相关知识点。" 在网页设计中，`相对定位`是一种重要的CSS定位技术，它允许元素相对于其在正常文本流中的初始位置进行移动。在HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值