清除position:relative占用的空白

最新推荐文章于 2024-07-23 22:34:05 发布
最新推荐文章于 2024-07-23 22:34:05 发布
阅读量2w 收藏 6
点赞数 3
分类专栏： 【java】 java 文章标签： 清除position
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/su20145104009/article/details/72850831
版权
java 同时被 2 个专栏收录
147 篇文章 35 订阅
订阅专栏
【java】
110 篇文章 6 订阅
订阅专栏

div等块级元素设置为position:relative后，原本的位置还会存在空白区域。看起来非常难受（它还占我的空间，我的其他元素就会被挤走）

解决办法：
父级元素设置为position:relative，然后为这个元素设置为position:relative；
完美解决。。

我觉得我已经偏离了我后端的道路。。。
就当是了解一下~ 遇到问题了总不能不解决是吧~

scx_white
关注
专栏目录
解决position:relactive占位问题
B2689429488的博客
12-08 734
父使用relactive,子使用absolute,代码如下: .types{ position: relative;//父 height:60%; .more{ //子 width:25px; height: 5px; position: absolute; top: 200rpx; right: 20rpx; } .bankname{ //子 color:#e1e1e1;
CSS浮动和定位
weixin_47782618的博客
04-13 640
1. float属性 1.1 浮动的定义及理解 任何元素浮动后都会变成块级元素。 CSS的float使元素脱离文档流（指元素在文档中不占位置了），按照指定的方向发生移动，直到它碰到父元素的边框或者另一个浮动元素的边框为止（浮动不会重叠）。浮动最初是用于图像环绕文字，所以尽管元素设置浮动后不占据位置，但文字仍能环绕在浮动元素周围，而不是被浮动元素覆盖。 ① 浮动元素的外边缘碰到包含框的情况： 框一向右浮动，直至它碰到了父元素的边框 ② 浮动元素碰到另一个浮动元素的边框的情况： 框一、框二、框
position:relative相对定位去除所占空间
CodeMen_的博客
05-13 4211
将margin设成负值，让后边的元素覆盖空白
css定位
saharalili的博客
07-12 251
绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来（脱离文档流），然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块（relative, absolute, fixed之一）进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。 相对定位，需要设置posit
CSS：position属性
最新发布
ChinaDragon10的博客
07-23 547
CSS：position属性 fixed、absolute、relative
CSS实现三列布局方法汇总
qq_42889406的博客
09-20 3091
未设置时原布局效果，div垂直排列 方法一：浮动 <style> .con{width: 100%; } .con>div{height: 500px; } .left{width:20%;float:left;background-color: pink; } .center{ width: 60%;float: left;background-color: yellowgreen;} .right{width:20%;float:l
Image relative 定位造成的占位怎么去除
Wanglas的博客
01-15 934
父元素增加 margin-bottom:（图片高度） 暂时没想到更好办法
清楚position:relative所占用的空白
rj2017211811的博客
02-10 1962
问题：一个元素设置为position:relative后原来的空间仍会占用 解决方法:父级元素设置position:relative 该元素设置position:absolute
css div设置positon:relative之后，再设置top,div的原位置有空白，解决办法
☆╮123☆
11-02 2509
div设置positon:relative之后，再设置top,div的原位置有空白，解决办法：设置父元素的overflow:hidden
【CSS】浮动布局 、定位布局 与 Flex布局
m0_48041877的博客
08-04 1465
css三大布局总结
【HTML+CSS】4.CSS布局：盒模型和定位
M&Q的博客
04-14 1826
之前讲到，样式是CSS语法的最小单元，每一个样式都由选择器和声明（规则）两部分组成，而声明又由属性和属性值组成。上一篇讲了选择器，这里就开始进入“属性”部分了。 要想灵活应用CSS设计出美观且多样的页面，就需要熟悉CSS的各类“属性”，CSS中包含超过100种属性，包括字体属性、文本属性、边框属性、边距属性、布局属性、定位属性、打印属性等。作为初学者，我觉得我们应该循序渐进，先集中熟悉最常用...
js解决overflow：scroll失效问题
热门推荐
weixin_34128534的博客
07-03 1万+
用JS有效解决移动w用JS有效解决移动web浏览器中HTML元素的overflow:sceb浏览器中HTML元素的overflow:scroll滚动属性失效问题iscroll4webhtml5mobilejavascriptweb移动平台前端UI开发工作，兼容问题超多，今儿又遇到一个。产品方要求在某固定尺寸容器内显示内容，但内容条数未知；如果条数过多，容器显示滚动条。这鸟需求...
前端学习：面试问到某某布局时的回答思路
qq_36070003的博客
04-10 926
专门写个文章提醒自己思考顺序，每次问到布局脑子就开始蒙开始混乱，千万不要败在布局上 面试问到某某布局时的回答思路一、考虑元素是块级元素还是行内元素还是行内块元素，考虑需要多少盒子二、如果涉及到一行多个盒子，考虑flex布局还是float布局弹性布局float布局三、考虑是响应式布局还是自适应布局flex自适应布局和高度有关的自适应和左右有关的自适应（规定float布局的情况，一般用flex布局即可解决）响应式布局三、考虑定位（Position）四、考虑位移（位置在哪）五、考虑内容位置（内容水平垂直居中）.
子组件一旦使用relative时，空白占位的去除问题
HITerGY的踩坑日记
09-02 516
不要只对子组件设置relative 要对其父组件设置relative 子组件使用absolute 然后调整top bottom等 效果如图，只对子组件设置relative的情况： 如果父设置relative子设置absolute的情况 ：
position:relative;top属性移动div后的空白怎么去掉？
evilcry2012的专栏
11-24 3725
position:relative;top属性移动div后的空白怎么去掉？ http://img02.taobaocdn.com/imgextra/i2/2102556064/T2QkN1X2FaXXXXXXXX_!!2102556064.jpg">  此处显示 class "q" id "1" 的内容fgdfgggfgdgdsfsadffdfasda 此
CSS position中 绝对定位和相对定位的区别以及占位问题
08-01 7063
!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS中的盒子模型</title> <style> body { margin: 0; } .d1 { width: 300px; heigh...
CSS position 属性(absolute、relative详解)
Sparkjin的专栏
08-07 1757
最近被问到position 属性absolute与relative的区别，感觉自己不是很清楚，故决定来查查看：        w3cschool中定义：     position可能的值 值 描述 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "to
HTML5+CSS3-基础03-清除浮动&position
weixin_47402645的博客
04-27 549
HTML5+CSS3-基础03-清除浮动&position3种清除浮动方法Position定位 3种清除浮动方法 1. 添加新元素，使用clear:both; 这种方式优点就是代码少，容易理解，浏览器几乎都支持，出现的问题比较少，但缺点就是如果页面浮动浮动布局多的话，就要添加很多空div去清除浮动，不便优化。虽然这是常用的清除浮动方式，但不建议使用 2.父容器使用overfl...
如何使用css去掉定位
m0_48353369的博客
02-22 4154
css怎么去掉定位 在网页制作的过程中，经常会使用position来定位元素实现布局，那么，若想取消定位，应该怎么操作呢？下面举例讲解CSS如何清除定位position。 1、新建一个html文件，命名为test.html 在test.html文件内，使用div标签创建一个模块，并设置其class为con，主要用于下面通过该class来设置css样式。 在div内，再创建一个div模块，并设置其class为pos。 <!DOCTYPE html> <html> <head&gt
position: absolute;和position: relative;
06-27
`position: absolute;` 和 `position: relative;` 都是 CSS 布局中的定位属性，但它们有不同的作用。 1. **position: absolute;**: 当你为一个元素设置 `position: absolute;` 时，它会脱离标准文档流（normal flow），不再影响其他元素的位置。元素会相对于其最近的具有非 `static` 定位的祖先元素（如果有的话，如果没有则相对于视口）进行定位。绝对定位的元素可以设置 `top`, `right`, `bottom`, `left` 属性来确定其在容器中的位置，并且可以使用 `z-index` 控制层叠顺序。 2. **position: relative;**: 相对于 `static` 定位的元素，`position: relative;` 的元素不会脱离文档流，它会保持在正常位置，并根据 `top`, `right`, `bottom`, `left` 属性进行偏移，但其他元素依然会按照预期排列。相对定位主要用于提供一个基准点，以便其他绝对定位的子元素定位在其上。 相关问题： 1. 何时使用 `position: relative;` ？有何优势？ 2. `position: absolute;` 通常用于哪些布局需求？ 3. 使用这两个定位属性时，
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值