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 6970
!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...
CSS之绝对定位与相对定位的区别
热门推荐
Learning_echo
08-05 3万+
一：绝对定位 position: absolute 绝对定位：绝对定位是相对于元素最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（也就是body）。 绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存在时一样，所以它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的相应顺序。     #di...
绝对定位与相对定位
仗剑天涯
10-30 1120
绝对定位与相对定位 绝对定位 绝对定位： 通过 left、right 属性来定义水平偏移量，top、bottom 属性来定义垂直偏移量 只要父级元素设了position并且不是static（默认既是static），那么设定了absolute的子元素即以此为包含块（最近的）, 绝对定位（Absolute positioning）元素定位的参照物是其包含块，既相对于其包含块进行定位，不一定是其父元素 总结： 当子元素设置position absolute的时，父元素必须设置position属性。 原因：
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），不独占一行。简单来说就是将窗体自上而下分成一行行， 并在每行中按从左至右的顺序排放元素，即为文档流。 每个非浮动块级元素都独占一行， 浮动元素则按规定浮在行的一端。 若当前行容不下， 则另起新行再浮动。内联元素也不会独占一...
这演示的叫啥数学模型来着，似曾很熟
最新发布
07-25
这演示的叫啥数学模型来着，似曾很熟
css中绝对定位和相对定位
09-11
在CSS中，绝对定位和相对定位是两种常用的定位方式。 绝对定位（absolute）是指元素从文档流中脱离出来，并相对于其最近的已定位的祖先元素进行定位。通过设置left、right、top和bottom属性，我们可以决定元素相...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值