css中的绝对定位和相对定位

最新推荐文章于 2022-05-15 00:03:23 发布
最新推荐文章于 2022-05-15 00:03:23 发布
阅读量128 收藏
点赞数
原文链接：https://my.oschina.net/u/4078166/blog/3012597
版权

绝对定位的元素是相对于最近的有定位的父元素，没有的话相对于body进行定位。相对于body定位时，left和top为0时，元素会跑到页面的左上角。绝对定位的元素是不占位的，可以覆盖其他的元素。

相对定位，相对定位是相对于元素在文档中的起始位置，无论是否移动，元素仍然占据原来的空间。

转载于:https://my.oschina.net/u/4078166/blog/3012597

chengping8844
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS中关于绝对定位和相对定位
01-08
body {margin: 30px; font-size:9pt;} .a, .b, .c, .d, .e {  width: 100px;  height: 100px;  margin: 5 auto;  color: #fff;  background: #000; } .aa, .bb, .cc, .dd, .ee {  top: 10px;...{positi
css 相对定位 绝对定位 浮动 分析
09-25
本篇文章将深入探讨相对定位、绝对定位以及浮动的概念，这些都是网页设计中不可或缺的技能。 **相对定位（Relative Positioning）** 相对定位是CSS定位的基础，它允许元素在不改变其在正常文档流中的位置的情况下...
CSS position中 绝对定位和相对定位的区别以及占位问题
08-01 6971
!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS中的盒子模型</title> <style> body { margin: 0; } .d1 { width: 300px; heigh...
css定位总结
白马非马军的博客
10-09 1145
定位position: static（默认）、fixed（固定定位）、absolute（绝对定位）、relative（相对定位）、sticky（粘性定位） 1. fixed      特点：不占空间、不随滚动条移动     相对于浏览器窗口进行定位，不占空间；     如果不设置定位坐标，则就在原来的位置；     如果结合定位坐标，就是相对于目标位置的距离；     层级要比普通标签...
绝对定位和相对定位详解
langyixuan的博客
05-14 1万+
一：绝对定位 position: absolute;绝对定位：绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。 绝对定位与文档流无关，所以它们可以覆盖页面上其他的元素，可以通过z-index属性来控制这些层的对方顺序。 #box_relative { position: absolute; left: 30px; top: 20px; } 二：相对定位 position: relative
相对定位与绝对定位的理解
dingzhai1883的博客
12-05 795
一、相对定位：如果对一个元素进行相对定位，它将出现在它所在的位置上，通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。默认相对值是body。注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。检查元素看body可知。个人理解：这个相对是相对的元素本身，之所以设置是使得left，top等能起作用，并且使用relative任然占据...
css使absolute相对于父容器进行定位而不是以body（为什么绝对定位（absolute）的父级元素必须是相对定位（relative））...
angou6476的博客
12-31 402
借知乎的回答如下解释： 首先，我想告诉你的是，如果父级元素是绝对定位（absolute）或者没有设置，里面的绝对定位（absolute）自动以body定位。这句话是错的。正确的是：只要父级元素设了position并且不是static（默认既是static），那么设定了absolute的子元素即以此为包含块（最近的）。绝对定位（Absolute positioning）元素定位的参照物是...
CSS网页布局教程:绝对定位和相对定位
12-07
本文将深入探讨相对定位和绝对定位，这两种定位方式在网页布局中的应用和区别。 相对定位（Relative Positioning）是CSS中的一种定位模式，通过设置`position`属性为`relative`实现。相对定位元素不会脱离正常的...
div+css相对定位和绝对定位用法实例详解
09-25
本教程将深入探讨两种主要的定位方式：相对定位和绝对定位，这两种方法在DIV+CSS布局中尤其常用。 1. 相对定位（relative） 相对定位是CSS定位的基础，它保持元素在正常文档流中的位置，但允许通过`top`、`right`、...
position属性absolute与relative 详解 不为人知的（fixed）绝对定位(fixed相对于浏览器窗口=不动的div)
qq_40435659的博客
05-10 2536
From：http://www.cnblogs.com/wiseblog/articles/4352007.htmlTop,Right,Bottom,Left（下称TRBL，TRBL可以折分使用。）定位一直是WEB标准应用中的难点，如果理不清楚定位那么可能应实现的效果实现不了，实现了的效果可能会走样。如果理清了定位的原理，那定位会让网页实现的更加完美。  在CSS中关于定位的内容是：positio...
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定位格式,css定位的五种方式
weixin_34475951的博客
08-03 324
position根据学习他人的资料，自己整理下笔记，巩固下css中五种定位方式知识点，温故知新，不断在工作中提升自我。position 属性的五个值：staticrelativefixedabsolutesticky(粘性定位)下面直接上图和代码举例：statichtml里面所有元素的position的默认值都是static，static会跟随html排版的流程移动。static对于top，lef...
绝对定位与相对定位
仗剑天涯
10-30 1121
绝对定位与相对定位 绝对定位 绝对定位： 通过 left、right 属性来定义水平偏移量，top、bottom 属性来定义垂直偏移量 只要父级元素设了position并且不是static（默认既是static），那么设定了absolute的子元素即以此为包含块（最近的）, 绝对定位（Absolute positioning）元素定位的参照物是其包含块，既相对于其包含块进行定位，不一定是其父元素 总结： 当子元素设置position absolute的时，父元素必须设置position属性。 原因：
CSS之绝对定位与相对定位的区别
热门推荐
Learning_echo
08-05 3万+
一：绝对定位 position: absolute 绝对定位：绝对定位是相对于元素最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（也就是body）。 绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存在时一样，所以它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的相应顺序。     #di...
css的top和left属性不起作用
weixin_34248023的博客
07-27 1007
原文：http://blog.sina.com.cn/s/blog_95d938f30101mr1i.html 在实践的例子时，如下设置了top和left不起作用 $("myPanel").css({"top":"500px","left":"500px"}); 而当加入position：absolute时，效果正常; $("myPanel").css({"position":"a...
css绝对定位、相对定位
swordsmanye的博客
07-10 7577
css绝对定位、相对定位 文档流的概念 确切的说应该是文档文档流模型的机制，html的布局机制就是用文档流模型的，即块元素（block）独占一行，内联元素（inline），不独占一行。简单来说就是将窗体自上而下分成一行行， 并在每行中按从左至右的顺序排放元素，即为文档流。 每个非浮动块级元素都独占一行， 浮动元素则按规定浮在行的一端。 若当前行容不下， 则另起新行再浮动。内联元素也不会独占一...
pi_heif-0.17.0-cp310-cp310-manylinux_2_17_aarch64.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
css中绝对定位和相对定位
09-11
在CSS中，绝对定位和相对定位是两种常用的定位方式。 绝对定位（absolute）是指元素从文档流中脱离出来，并相对于其最近的已定位的祖先元素进行定位。通过设置left、right、top和bottom属性，我们可以决定元素相...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值