CSS绝对定位下的布局

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

水平布局

left margin-left border-left padding-left width padding-right border-right margin-right right

=父元素内容区宽度

-当发生过度约束时

1:如果9个值中没有auto，则调整right值

2:可以auto的直

margin width left right

(1)1个auto 其他值都固定，则会调整这个auto的值

(2)2个auto

margin width为auto 调整width

margin left/right 为auto 调整left/right

width left/right 为auto 调整left/right

left right 为auto 调整right

（3）3个auto

margin width left 为auto 调整left

margin width right 为auto 调整right

width left right 为auto 调整right

（4）4个auto

margin width left right 都为auto 调整right

总结：right>left>width>margin

垂直布局

等式也必须满足

1:如果定位的元素层级是一样的， 下边的元素会盖住上边

2:在定位的情况下

通过z-index属性设置元素的层级

属性值：是一个正整数

层级越高，优先级也就越高

.琥珀川.
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【CSS笔记】CSS布局之五种定位方式（静态、相对、绝对、固定、粘性）
•一个写代码的• •知识星球•https://t.zsxq.com/15rGFbGEk
08-18 5572
设置元素的【position】属性值等于【absolute】绝对定位之后，如果没有设置【top，left、right、bottom】属性，那么就会默认都是0，这个时候元素就会移动到浏览器屏幕可见区域的左上角位置。relation相对定位，这个属性是相对于元素自身位置定位的，也就是说，某个元素使用相对定位之后，它是以没有使用相对定位之前显示的位置为参考点，上下左右移动多少距离，下面看个案例。CSS也支持相对于某个元素，进行绝对定位，也就是说，可以自定义当前元素是以哪个元素为参考点，从而完成绝对定位。...
css布局绝对定位下margin失效的解决方法
12-09
如果是要垂直居中，也是一样的方法，即设置top:50%,然后margin-top的值为层的高度的一半 position:absolute; left:50%; top:50%; margin-top:-13px; margin-left:-58px; width:116px; height:25px; z-index:999999;
CSS分栏布局的方法:绝对定位和浮动
12-01
在CSS中，实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项(absolute 、static、relative和fixed)中的绝对定位(absolute positioning)，它可以将文档中的某个元素从其原本位置上移除，并重新定位在期望的任何地点之上。第二种则是使用CSS中的浮动(float)概念。 绝对定位或浮动都能够用来实现分栏效果。二者可以独立使用，也可以结合在一起，相辅相成。 1、绝对定位 绝对定位的优势在于，我们可以丝毫不差地精确控制任何元素的位置—这里面没有什么需要猜测或者运气的成分。由于应用了绝对定位的元素被不留痕迹地从常规文档流中完全移除，所以它也不会为其他元
【CSS】CSS经典布局之绝对底部布局
最新发布
weixin_57992300的博客
03-18 102
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
CSS学习之五 定位布局
12-03
一、定位属性的基本情况 使用position属性对元素进行定位： position属性 值：static | absolute | fixed | relative 初始值：static运用范围：所有元素继承值：无计算值：根据指定确定 static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 absolute：元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素定位后生成一个块级框，而无论原来
绝对定位后的元素无法触发点击事件
qq_45832807的博客
08-12 3773
解决方法 可以通过给绝对定位的层多加一个样式：" pointer-events:none; " 这样绝对定位层下的元素就可以点击了；如果在绝对定位层上存在能够点击的元素，在添加" pointer-events:none; " 后将同样不起作用；为了避免此情况，可以给需要操作的元素设置" pointer-events:auto" 即可。 详情 ionic试例： <ion-app> <ion-content fullscreen class="ion-padding-bottom"
绝对定位position:absolute和相对定位position:relative
x1037490413的博客
09-08 863
position:absolute和left,right,top,bottom配合使用,left和right只写一个,top和bottom也只写一个, 假如left:100px,就是div的左边框线距离左边浏览器边框100px,right:100px是div的右边框线距离右边浏览器边框100px <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta nam
详解定位以及布局冲突问题
qq_18661257的专栏
10-14 1303
不管是float浮动属性还是position都会涉及到脱离文档流导致网页布局发生改变。 如下代码：（为没有position,以及float脱离文档流操作的div盒子结构） Document *{margin:0px; padding:0px;} div{width:100px;height:100px;} #id1{background:red;} #id2{backg
html消除绝对定位的影响,消除子元素浮动影响父元素高度折叠,使用 绝对定位,浮动定位实现三列布局--2019-9-4...
weixin_33430573的博客
06-03 395
1. 实例演示如何消除子元素浮动造成父元素高度折叠的影响实例html>.box1{width:300px;background:lightblue;border:5pxdashedblack;}.box2{width:inherit;height:300px;background:lightcoral;}.box2{float:left;}.box1{overflo...
css简易的进度条
qq_45723045的博客
10-22 749
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-eq...
CSS网页布局教程:绝对定位和相对定位
12-07
CSS网页布局教程:绝对定位和相对定位。通过本文你绝对能理解绝对定位和相对定位了，如果你看完本篇文章还不理解绝对定位和相对定位的话，我看你就别学CSS了！哈哈！ 概要： 本文主要描述XHTML中相对定位和绝对定位...
IE中绝对定位子元素相对定位，被后面元素绝对定位覆盖等问题。
界之边缘的轮回
03-30 1839
1.IE中绝对定位子元素相对定位，被后面元素绝对定位覆盖问题。 父元素A{ position:relative; }     |     |——A子元素{ position:absolute; }     | 元素B{ position:relative; } 想要A子元素在元素B之上，给A子元素添加z-index：999属性无效，需要给父元素A添加z-index，有且大
css绝对内容布局,这可能是最全面的CSS基础布局文章
weixin_42506647的博客
08-03 343
前言这是一篇基础CSS布局的内容，可能内容比较的简单。但是很适合查缺补漏的阅读。这篇文章来自于互联网(掘金：Sweet_KK)。我简单的自己跑了一遍，添加了一些自己的看法，删了一些个人感觉不重要的，重新排版了一下。当然，如果原作者感觉不妥，私信就删。一、水平居中1.1、文本/行内元素/行内块级元素tips：text-align只控制行内：文字、行内元素、行内块级元素，相对于它的块级父元素对齐。只对...
CSS布局之定位 详解（相对定位、绝对定位、子绝父相、固定定位）
Esther_liew的博客
05-26 784
CSS布局--定位详解（相对定位、绝对定位、子绝父相、固定定位）
CSS布局-定位，相对，绝对，子绝父相，固定定位，层级关系。
weixin_48370579的博客
12-11 1892
CSS布局-定位，相对，绝对，子绝父相。 目录CSS布局-定位，相对，绝对，子绝父相。1、定位1.1 网页常见布局方式1.2 定位的常见应用场景2.1 定位初体验2.2 使用定位的步骤3.1 静态定位4.1 相对定位5.1 绝对定位5.2 绝对定位到底相对于谁进行偏重点6.1 子绝父相介绍7.1 固定定位8.1 元素层级问题8.2 更改定位元素的层级重点学习目标 ◆ 能够说出 定位 的常见应用场...
一、CSS定位布局[相对定位、绝对定位、固定定位]
黑日里不灭的light
09-29 1206
的特征，只不过参照系是body，不会是其它（在设置left等等就会使用absolute的特征）；特性：脱离文档流(意味着可以与普通文档元素重合)，行内块特性（与浮动元素一样，无论原本元素是怎样都是默认有。解释：通过 z-index 控制元素的上下层级，距离参照系左边距离20px；距离参照系右边距离20px；距离参照系顶部距离20px；距离参照系底部距离20px）距离参照系左边距离20px；距离参照系右边距离20px；距离参照系顶部距离20px；距离参照系底部距离20px）距离20px)，这种移动是。
css中的绝对定位布局及层级与透明效果
qq_48802281的博客
07-01 889
css中的绝对定位布局及层级与透明效果
css绝对定位和相对定位
08-29
### 回答1： CSS中的绝对定位和相对定位是用于控制元素位置的两种常用方法。它们的区别如下： 1. 相对定位 相对定位是指相对于元素原本所在的位置进行定位。它通过使用 `top`, `right`, `bottom` 和 `left` 属性来控制元素的位置。例如，我们可以使用以下代码将一个元素相对于其原本的位置向下移动20个像素： ```css position: relative; top: 20px; ``` 2. 绝对定位 绝对定位是指相对于最近的已定位祖先元素（即指定了 `position` 属性且不为 `static` 的元素）进行定位。如果没有已定位的祖先元素，则相对于文档的 `body` 元素进行定位。和相对定位一样，我们可以使用 `top`, `right`, `bottom` 和 `left` 属性来控制元素的位置。例如，我们可以使用以下代码将一个元素相对于其最近的已定位祖先元素向右移动50个像素： ```css position: absolute; right: 50px; ``` 总的来说，相对定位和绝对定位都是用于控制元素位置的方法，但它们的定位方式有所不同。相对定位是相对于元素原本的位置进行定位，而绝对定位是相对于最近的已定位祖先元素进行定位。 ### 回答2： CSS绝对定位和相对定位是一种CSS布局技术，用于控制元素在网页中的位置。 相对定位是相对于元素原来所在的位置进行定位。通过将元素的position属性设置为relative，元素将会相对于自己原来所在的位置进行移动，移动后的位置由top、right、bottom和left属性来控制。相对定位不会改变文档流中其他元素的位置，所以当一个元素被相对定位后，其他元素仍然按照原来的顺序和位置排列。 绝对定位则是相对于最近的非静态定位的祖先元素（如果不存在则相对于文档的body元素）进行定位。通过将元素的position属性设置为absolute，元素将会脱离文档流，不再占据原来的位置。绝对定位的位置也是由top、right、bottom和left属性来控制。绝对定位会改变其他元素的位置，当一个元素被绝对定位后，其他元素会填补改元素脱离文档流后的空白区域。 相对定位和绝对定位的特点和用途不同。相对定位用于微调元素的位置，通常与其他定位方式（如静态定位或浮动定位）一起使用，达到更灵活的布局效果。绝对定位则更适合创建自定义的布局，可以把元素摆放在页面的任何位置。无论是相对定位还是绝对定位，都可以通过配合使用z-index属性来调整元素的层次顺序，实现不同元素的遮盖效果。 综上所述，CSS绝对定位和相对定位都是布局技术，使用不同的定位原点来实现元素的定位，相对定位相对于元素原来的位置进行定位，而绝对定位则相对于最近的非静态定位的祖先元素进行定位。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值