CSS div 设置positon:relative之后，再设置top,div的原位置有空白，解决办法

最新推荐文章于 2024-05-11 11:10:44 发布
最新推荐文章于 2024-05-11 11:10:44 发布
阅读量404 收藏
点赞数
文章标签： vue css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46513796/article/details/119205036
版权

a今天写东西发现了这个问题

查了查这个问题，基本都是说给父元素relative或者本身元素改成absolute，但是我这种完全无法使用那种方法，所以想了另一个方法

视频上一个可以触发点击事件的放大按钮图，再给放大图片进行定位的时候发现了空白问题 

 设置  宽高  和视频大小一样后，设置一个   overflow：hidden  ，就可以完美解决未脱离文档流导致的空白问题！！！！

苍蓝love
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS中的position:relative;的作用示例介绍
12-10
引用 static : 　无特殊定位，对象遵循HTML定位规则 absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框 relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置 fixed : 　IE5.5及NS6尚不支持此属性 "对于页面中一个static的div#demo，我想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方，应该是用这个position:relative
绝对定位bottom失效
joan_yb的博客
10-28 613
绝对定位bottom失效
CSS—定位
有道无术，术尚可求，有术无道，止于术。
01-27 371
定位方式属性： 定位方式属性position 属性：position 取值： static  relative : 相对的 absolute : 绝对的 fixed : 固定的 定位偏移属性 偏移属性 属性 ： top :取值为正，向下移动，取值为负，向上移动 right 取值为正，向左移动，取值为负，向右移动 ...
css_position详解
u013785316的博客
04-21 272
css_position详解
css div设置positon:relative之后，再设置top,div的原位置有空白，解决办法
☆╮123☆
11-02 2488
div设置positon:relative之后，再设置top,div的原位置有空白，解决办法：设置父元素的overflow:hidden
css：解决position: relative定位top设为负数后出现的空白
m0_46365130的博客
10-29 2107
帮top属性改为margin-top
ios网页样式问题：position: fixed； top: 0；在深色模式下顶部出现一条白线
qq_34221812的博客
02-28 428
如图： 加上：transform: translate3d(0,-1px,0);
设置了相对定位relative之后，改变top值，如何去掉多余空白？
http://xueshuai.top
08-12 2506
众所周知，relative和absolute有一个区别在于relative是相对自身定位，而absolute是相对于最近的定位父级定位，而此时的相对定位经过top值改变其在文档流中的位置之后，自身本来的位置依然在文档流中占据位置。 要想解决这个问题，我的想法就是给个margin负值，以减少下方的空白 <body> <!-- 此时div占据的位置是他自身...
css中position属性使用详解
09-25
positon有4个属性:static relative absolute fixed，我们都知道absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？绝对是什么地方的绝对，相对又是相对于什么地方而言的呢？那他们又有什么...
css中postion的fixed与absolute区别详解
12-13
一直对positon的几个定位方式不是特别理解，记录下 fixed固定定位，参照位置是浏览器窗口的左上角，即坐标点为(0px, 0px) absolute绝对定位，参展位置是离当前元素最近的定位方式为fixed,absolute,relative的祖先...
前端界面进行自适应布局之positon属性使用
09-25
自适应布局有很多种方法，最近使用position属性进行界面布局，在以后的开发中将要经常使用，所以记录下
css sprite
12-19
css精灵图生成软件，自动生成，并给出小图的backgrount-positon的值。比较好用
position:relative;top属性移动div后的空白怎么去掉？
evilcry2012的专栏
11-24 3661
position:relative;top属性移动div后的空白怎么去掉？ http://img02.taobaocdn.com/imgextra/i2/2102556064/T2QkN1X2FaXXXXXXXX_!!2102556064.jpg">  此处显示 class "q" id "1" 的内容fgdfgggfgdgdsfsadffdfasda 此
设置了相对定位relative之后，改变top值，如何去掉多余空白
秋霜梦红尘的博客
06-07 1134
  众所周知，relative和absolute有一个区别在于relative是相对自身定位，而absolute是相对于最近的定位父级定位，而此时的相对定位经过top值改变其在文档流中的位置之后，自身本来的位置依然在文档流中占据位置。 要想解决这个问题，我的想法就是给个margin负值，以减少下方的空白 <body> <!-- 此时div占据的位置是他自身的高度加上top值为110px --> <div style="width:100px;height:100
css 之 relative
小白向前冲！
02-04 814
【1】对同源属性值的限制作用 relative 对 absolute 的作用： （1）限制定位 （2）限制层级 （3）限制超越 overflow relative 对 fixed 的作用 （1） 限制 z-index 层级 【2】 relative 定位的特点 （1） 相对自身 ： 相对于自身的初始位置进行定位 （2） 无侵入
html的div上下有空白,在不设置border 时这个外层div 上下为什么出现空白？
weixin_31690347的博客
06-18 872
(图1)div.wrap 上下出现一段空白，浏览器窗口的滚动条滚到下面可以看到下面也有一条等长的空白，似乎与顶栏高度相同。在设置border 之后可以消除(图2)，加上box-sizing:border-box可以去掉浏览器滚动条。怀疑跟wrap 内部的子元素有关。初学者，为了实现效果一边搜一边做，混用了一堆东西~页面代码如下：DocTalkTITLE TEXT 标题栏JIFJRIJFIJRIJF...
踩坑系列之position:fixed和position:relative的冲突
m0_65661084的博客
03-25 818
如下图 一开始item组件有一个相对定位 这样子上拉的时候 搜索框固定了 下面却有item的东西 解决方法：将item的相对定位取消 .item { display: flex; justify-content: space-between; /* position: relative; */ margin-top: 20rpx; } ...
解决vscode保存less和sass时自动生成css文件的问题
最新发布
锦瑟年华L的博客
05-11 116
解决vscode保存less和sass时自动生成css文件的问题
positon:absolute
05-18
"position:absolute" 是 CSS 属性，它可以让一个元素的位置相对于其最近的非 static 定位祖先元素进行定位。这意味着，如果一个元素的父元素具有 "position: relative" 或 "position: absolute" 的属性，那么这个元素的位置就会相对于其父元素进行定位。如果没有找到非 static 定位的祖先元素，则相对于文档的 body 元素进行定位。通过使用 "top", "bottom", "left" 和 "right" 属性，可以进一步指定元素的位置。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值