css中的定位可能会导致的问题

最新推荐文章于 2022-09-23 10:21:31 发布
原创 最新推荐文章于 2022-09-23 10:21:31 发布 · 875 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

博客介绍了CSS中的绝对定位（position:absolute;）和相对定位（position:relative;）。开启绝对定位要达到效果，需在其父盒子中开启相对定位，若不开启，元素会默认相对于整个文档定位。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、position:absolute;
二、position:relative;
如果开启绝对定位的话 并想要其达到其效果必须在 其父盒子中开启相对定位
如果不开启的话 会默认相对于整个文档定位

CSS定位的方式与后遗症
weixin_44049725的博客
10-20 497
CSS中的五种定位方式 一、普通文档流定位（元素默认的定位方式） 块级元素垂直布局：div、hn、table、ul等元素会按照它本身的标准文档流方式进行排列布局； 行内元素不独占一行 ：行列块元素可以设置宽高，内联元素无法设置宽高； 二、浮动定位(float：脱离文档流的定位方式) 浮动引发的特殊效果： 1、 如果在父元素不设置高度的情况下，父元素的高度将会出现所谓的塌陷，本身应该排在被浮动元素...
CSS中如果固定定位只给出了定位模式position:fixed,没给出边位移引发的问题
01-20
在CSS布局中，定位是实现元素精确放置的关键技术。...仅设置`position: fixed`而不指定边位移会导致元素无法正确定位，可能会产生意外的布局效果。因此，理解和正确应用定位模式以及边位移是CSS布局中的核心技能。
CSS弊端
weixin_50723416的博客
03-09 454
CSS是一门非程序式的语言，没有变量、函数、SCOPE(作用域)等概念。 CSS需要书写大量看似没有逻辑的代码，CSS沉余度比较高。 不方便维护及扩展，不利于服用。 CSS没有很好的计算能力。 非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难组织良好且易于维护的CSS代码项目。 ...
关于offsetLeft与position:relative，margin:auto;的一些关系
jq
01-02 2984
对于div的offsetLeft或offsetTop属性，它与postion的关系十分密切。 默认情况下是position:static;在position为static(即没有设置positoin属性，或position为空时)。 1.在ie7(ie6没有环境测试估计一样)中,div的offsetLeft的值是当前div左边框到它父级div左内边框的像素距离，对于它的父级div的po
Float and its associated properties || 浮动及其相关属性
优快云_Alex_的博客
12-04 144
float 浮动的相关属性 display 属性 该属性规定了元素应该生成的框的类型。 常用属性： 默认值：inline，此时元素被显示为行内元素 block 此时元素被显示为块级元素 inline-block 此时元素被显示为行内块元素 none 此时元素不会被显示 float 属性 该属性定义了元素往哪个方向浮动。不论浮动元素是什么类型的元素，都会生成一个块级框，变成行内块级元素 常用属性： none 无浮动 left 左浮动 right 右浮动 inherit 从父元素继承浮动 visib
css中position：relative问题记录
CC的专栏
07-30 541
定义选择器1span.articategory{ position: relative; left:20px; color: #b4b4b4; } <span class="articategory">标签:动态</span>出现问题标签透过了导航栏的不透明色 - 开始状态如下 - 页面往上滑，文字标签透过了 定义选择器2span.articategory{
css中overflow:hidden失效问题的解决方法
11-21
因为绝对定位的子元素会从内向外寻找有定位的父元素，找不到的话overflow:hidden;也会随之失效。 一探究竟 重要的事再说一遍，正如上述所言，overflow:hidden;失效的原因是：父元素想要隐藏溢出的绝对定位的子元素，...
css中的三种基本定位机制
12-01
css中的三种基本定位机制 a.普通文档流 b.定位：相对定位 　绝对定位 　固定定位 c.浮动 1.普通流中，元素位置由文档顺序和元素性质决定，块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin值计算得到，...
CSS中的元素定位方法详解
12-13
理解并熟练掌握这些CSS定位方法，能让你在构建网页时更加得心应手，创造出符合设计需求的精美界面。同时，由于不同浏览器可能存在差异，使用reset CSS或normalize.css等工具可以帮助解决跨浏览器兼容性问题。在实践...
css3 transform导致子元素固定定位变成绝对定位的方法
11-21
本文介绍了css3 transform导致子元素固定定位变成绝对定位的方法，分享给大家，也给我自己留个笔记，方便查找。 <!DOCTYPE html> <html> <head> <style> body { background: #f60; // 橙色 ...
全是 position：relative 惹的祸
茶叶沫ě
02-07 931
今天在做一个人家二次开发过的项目在其他浏览器中没有任何问题，但是在ie6下面简直惨不忍睹，但是仔细调试下来其实主要问题只有两个： 1、浮动问题： 这个已经是老生常谈，经常出现这样那样的错位，其实都是因为浮动没有清除造成的。 解决办法：加clear:both; 2、position:relative 剩下的全是position:relative 惹的祸了。      i
relative学习笔记
crazyzhanyue的博客
03-04 1003
relative对absolute的限制作用： 限制left/top/right/bottom定位： 父元素使用了relative定位后，使用了absolute的子元素无法越过父元素进行定位； 限制z-index层级： 使用了relative定位的同级元素，其本身的z-index值将决定其子元素的z-index层级； 限制在overflow下的嚣张气焰： 子元素设置了absolute定位时，其
CSS3过渡效果小练习-进度条
nuomi_w的博客
11-15 1538
Document
聊聊“前端引导操作”（慎用fixed、relative、absolute组合技）
flying meng的菜鸟居
09-23 5578
对这个“引导页”，我第一时间也是迷茫的，有些按钮询问了产品才知道是干啥用的。几乎所有的相关文章都在说 relative 会如何影响到 absolute 和 fixed，但似乎笔者没有见到有反过来研究的，也可能是我阅读的少，如有见谅。第一种方式，保证了元素的“独立性”，但是缺失了元素的“可交互性”。但这不是最重要的，每次的clone会带来繁琐的操作，我们应该避免它！当然，这种方法也是有遗憾的：由于这时候“高亮”也是“画”出来的，所以这时候切记不可让页面滚动 —— 页面操作是有延迟的！
css解决页面左右多出部分,固定页面，高度加滚动条
张火火
04-17 3922
.content{ width:100%; display:fixed; height:100%; overflow-y:scroll; overflow-x:hidden;}
CSS中绝对定位导致页面混乱的原因以及解决办法
超域的博客
06-26 6561
实现子元素在父元素中的绝对定位必须满足以下两个条件： 1、父元素要有相对定位属性（position：relative）， 2、子元素设置绝对定位（position：absolute），并且同时加四个方向（top，bottom，left，right）的任意方向的属性值 子元素的绝对定位是包含块“containing block”的知识， 在 10.1 节 (http://www.w3....
css中的定位对其他元素的影响
蒲小若的博客
08-03 3996
1.相信初学者在刚刚接触定位，并且使用固定定位的时候，可能会出现一些不是自己想要的那个效果，使用固定定位的元素会影响到显示在它下方的元素，下方的元素会被使用固定定位的元素覆盖掉固定定位元素的高度。下面就给大家介绍一个小方法来解决这个小问题吧！ css代码如下 .top{       position: fixed;       width: 100%;      
关于CSS的定位问题，你需要注意的一些坑
喵咪不爱吃鱼的博客
11-24 2812
css中的定位类型一览 position这个css属性允许我们指定元素的定位类型。css定位选项 static是此属性的默认值。这时候，我们称那个元素没有被定位。为了定位它，我们需要改变预定义的类型。 为了改变预定义类型，我们将position的属性值设置为下面中的一个：relative absolute fixed sticky 只有设置了之后，我们才能使用offset参数来为我们的元
DIV CSS面试必备：八大常见问题解析
1. **浮动元素的间距问题**：在CSS中，浮动元素（如`div`）之间可能会出现额外的间距。这个问题可以通过设置负边距来解决，例如`margin-left: -10px`。然而，需要注意的是，不同浏览器可能对此有不同的处理方式，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值