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

最新推荐文章于 2023-12-18 19:00:35 发布

原创最新推荐文章于 2023-12-18 19:00:35 发布 · 535 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #css #html

在处理视频上点击放大按钮的定位时，遇到了因元素未脱离文档流导致的空白问题。常规解决方案是设置父元素为relative或元素自身为absolute，但此情况不适用。通过设置宽高与视频大小相同并应用overflow: hidden，成功解决了这个问题，实现了无空白的完美显示。

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

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

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

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

苍蓝love

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

HTML+CSS第九课：使用CSS布局网页——盒子的定位、浮动和浮动塌陷及解决办法

王迪

12-08

3168

知识点：理解标准文档流、盒子的定位属性、盒子的浮动属性、浮动塌陷以及清除塌陷的方法。 1、盒子的定位默认情况下，盒子的排列是根据其在文档中出现的顺序，从上到下、从左到右的顺序来进行的，这种定位方式又被成为标准文档流。由于标准文档流提供的网页布局方式缺少变化，CSS中提供了更多的方式来定位元素。例如使用浮动的方式来定位，使元素脱离标准文档流的限制，使布局有更多的选择。定位的基本思想很简单，它允...

html的div上下有空白,在不设置border 时这个外层div 上下为什么出现空白？

weixin_31690347的博客

06-18

970

(图1)div.wrap 上下出现一段空白，浏览器窗口的滚动条滚到下面可以看到下面也有一条等长的空白，似乎与顶栏高度相同。在设置border 之后可以消除(图2)，加上box-sizing:border-box可以去掉浏览器滚动条。怀疑跟wrap 内部的子元素有关。初学者，为了实现效果一边搜一边做，混用了一堆东西~页面代码如下：DocTalkTITLE TEXT 标题栏JIFJRIJFIJRIJF...

参与评论您还未登录，请先登录后发表或查看评论

body下面的relative元素，top百分比失效问题（已解决）

weixin_42146720的博客

12-18

1323

CSS 绝对定位和相对定位

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

☆╮123☆

11-02

2547

div设置positon:relative之后，再设置top,div的原位置有空白，解决办法：设置父元素的overflow:hidden

css：解决position: relative定位top设为负数后出现的空白

m0_46365130的博客

10-29

2486

帮top属性改为margin-top

ios网页样式问题：position: fixed； top: 0；在深色模式下顶部出现一条白线

qq_34221812的博客

02-28

504

如图：加上：transform: translate3d(0,-1px,0);

CSS中的position:relative;的作用示例介绍

12-10

正确的做法是设置`div#demo`的`position`为`relative`，这样`div#demo`成为`div#sub`的定位参考点。然后，对`div#sub`应用`position:absolute;`，并使用`right:10px; top:10px;`来确定相对于`div#demo`的位置。 ...

<div class="input-group col-md-3" style="margin-top:0px positon:relative"> <input type="text" class="form-control"placeholder="请输入字段名" / > <span class="input-group-btn"> <button class="btn btn-info btn-search">查找</button> <button class="btn btn-info btn-search" style="margin-left:3px">添加</button> </span> </div>

最新发布

03-08

样式部分设置了`margin-top:0px`和`position:relative`，不过注意到“position”拼写错误，应该是`position`，这可能是个笔误，需要确认是否影响布局。内部有一个`input`元素，类型是文本，类名为`form-control`，...

前端界面进行自适应布局之positon属性使用

09-25

- 第一个内部`div`设置`top:250px; bottom:0px; left:0px;`，这意味着它将始终占据从顶部250像素开始到底部的所有空间，左侧边界与外层容器对齐。 - 第二个内部`div`设置`top:60px; bottom:0px; left:0px;`，它会在...

理解CSS定位：相对定位与绝对定位详解

在网页设计中，CSS的position属性用于控制元素的位置，它有四个主要值：static、relative、absolute和fixed。静态定位（static）是默认值，元素按照正常的文档流顺序排列。相对定位（relative）允许元素相对于其原本...

CSS实现三列布局方法汇总

qq_42889406的博客

09-20

3160

未设置时原布局效果，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

设置了相对定位relative之后，改变top值，如何去掉多余空白？

http://xueshuai.top

08-12

3004

众所周知，relative和absolute有一个区别在于relative是相对自身定位，而absolute是相对于最近的定位父级定位，而此时的相对定位经过top值改变其在文档流中的位置之后，自身本来的位置依然在文档流中占据位置。要想解决这个问题，我的想法就是给个margin负值，以减少下方的空白 <body> <!-- 此时div占据的位置是他自身...

position:relative;top属性移动div后的空白怎么去掉？

evilcry2012的专栏

11-24

3818

position:relative;top属性移动div后的空白怎么去掉？ http://img02.taobaocdn.com/imgextra/i2/2102556064/T2QkN1X2FaXXXXXXXX_!!2102556064.jpg"> 此处显示 class "q" id "1" 的内容fgdfgggfgdgdsfsadffdfasda 此

css 之 relative

小白向前冲！

02-04

895

【1】对同源属性值的限制作用 relative 对 absolute 的作用：（1）限制定位（2）限制层级（3）限制超越 overflow relative 对 fixed 的作用（1）限制 z-index 层级【2】 relative 定位的特点（1）相对自身：相对于自身的初始位置进行定位（2）无侵入

踩坑系列之position:fixed和position:relative的冲突

m0_65661084的博客

03-25

1034

如下图一开始item组件有一个相对定位这样子上拉的时候搜索框固定了下面却有item的东西解决方法：将item的相对定位取消 .item { display: flex; justify-content: space-between; /* position: relative; */ margin-top: 20rpx; } ...

消除div中ul上部产生的空白

02-24

1934

#muen_right_one_main ul{ /* 消除 ul 上部产生的空白 */ padding:0px; margin:0px; overflow:hidden; }

慎用 overflow:hidden

weixin_34417635的博客

03-25

159

为了页面不显示滚动条，通常是用 body{overflow:hidden;} 来控制。这两天我郁闷的发现，如果用了这个样式，在 IE 7.0 里面好像有时候如果页面内容超出，则整个页面显示为空白。刷新几次，有时候能显示有时候不能显示。目前我还没时间去仔细研究这到底是 IE 7 独有的现象，还是其他版本也有。先记录于此。...

html中absolute和relative对子div的宽高的影响

weixin_42822484的博客

06-04

1316

css中的postion是一个比较重要的样式，其中的absolute和relative不仅对自身的位置有影响，对子div的位置也会有影响。不仅如此，对子div的宽高也有影响。我们都知道将div的width和height设置为百分比可以实现自适应，但是有时候