正文 

当前位置： 首页 > 问答 >

位置绝对和溢出隐藏

     2023-03-05     301

关键词：

【中文标题】位置绝对和溢出隐藏【英文标题】：Position absolute and overflow hidden 【发布时间】：2011-06-04 02:12:34 【问题描述】：

我们有两个 DIV，一个嵌入另一个。如果外层 DIV 不是绝对定位，则内层 DIV 是绝对定位，不服从外层 DIV 的溢出隐藏 (example)。

有没有机会让内部 DIV 服从外部 DIV 的溢出隐藏而不将外部 DIV 设置为绝对位置（因为这会破坏我们的完整布局）？ 此外，我们的内部 DIV 的相对位置也不是一个选项，因为我们需要从表 TD (exmple) 中“长出来”。

还有其他选择吗？

【问题讨论】：

【参考方案1】：

对于外部 div，position: relative 怎么样？在隐藏内部的示例中。它也不会在其布局中移动它，因为您没有指定顶部或左侧。

【讨论】：

【参考方案2】：

将外部<div> 设置为position: relative，将内部<div> 设置为position: absolute。它应该适合你。

【讨论】：

谢谢你们俩。我一直认为 position:relative 是默认值。我刚刚了解到静态是默认设置。我接受 shankhan 的回答，因为这两个答案是等价的，而 shankhan 需要更多积分；-) 一些解释和/或文档将是一个很好的补充。【参考方案3】：

你只需像这样制作divs：

<div style="width:100px; height: 100px; border:1px solid; overflow:hidden; ">
    <br/>
    <div style="position:inherit; width: 200px; height:200px; background:yellow;">
        <br/>
        <div style="position:absolute; width: 500px; height:50px; background:Pink; z-index: 99;">
            <br/>
        </div>
    </div>
</div>

我希望这段代码对你有帮助:)

【讨论】：

【参考方案4】：

绝对定位元素实际上是相对于relative 父级或最近找到的相对父级定位的。所以overflow: hidden的元素应该在relative和absolute定位元素之间：

<div class="relative-parent">
  <div class="hiding-parent">
    <div class="child"></div>
  </div>
</div>

.relative-parent 
  position:relative;

.hiding-parent 
  overflow:hidden;

.child 
  position:absolute;

【讨论】：

【参考方案5】：

确定。

    父位置相对。 父级已手动分配宽度和高度（作为具有绝对位置的子元素很重要）。 子位置绝对； 

.outer
   position:relative;
   width:200px; 
   height:100px;
   overflow:hidden;


.inner
   position:absolute;
   width:100px;
   height:100px;
   font-size:3rem;

<div class="outer">
<div class=inner>
Inner DIV to apply overflw hidden
</div>
</div>

【讨论】：

Chrome和Firefox溢出：隐藏的跳跃元素

...中发生的一种奇怪行为和“溢出：隐藏；”和一个带有“位置：绝对；”的锚。每当锚点获得焦点时，它上面的元素就会神奇地跳到 查看详情

在悬停时显示 div（固定位置和溢出隐藏父级）

】在悬停时显示div（固定位置和溢出隐藏父级）【英文标题】：showdivonhover(fixedpositionandoverflowhiddenparent)【发布时间】：2014-10-1003:53:28【问题描述】：有一个固定侧边栏的网站，高度为100%。当您将鼠标悬停在占位符img上时，您可... 查看详情

position:absolute用法（隐藏溢出部分）

参考技术A地址：https://www.cnblogs.com/goloving/p/9275776.html1、绝对定位元素溢出父元素，怎么隐藏问题？通常，为了让DIV子元素超出部分隐藏，都是在父元素设置overflow:hidden，这样即可防止子元素撑开父元素，使子元素能够溢出隐藏... 查看详情

单击时隐藏和显示 div，带有绝对位置的动画，并在隐藏时将其删除

】单击时隐藏和显示div，带有绝对位置的动画，并在隐藏时将其删除【英文标题】：Hideandshowdivsonclickwithanimationofabsoluteposition&removethemonhide【发布时间】：2012-04-2912:38:04【问题描述】：我想：单击“NEW”按钮将新的DIV添加到“C... 查看详情

CSS位置：绝对，底部：0，父级溢出：自动

】CSS位置：绝对，底部：0，父级溢出：自动【英文标题】：cssposition:absolute,bottom:0withparentoverflow:auto【发布时间】：2014-06-1615:45:48【问题描述】：这是一个聊天室，里面有一个div.words作为容器，里面有一个.contentdiv。我想从.content... 查看详情

iOS 溢出-x（或绝对位置）使滚动不连贯？

】iOS溢出-x（或绝对位置）使滚动不连贯？【英文标题】：iOSoverflow-x(orpositionabsolute)makesscrollingchoppy?【发布时间】：2012-10-1118:08:47【问题描述】：我希望我的网页只能垂直滚动。所以我将overflow-x:hidden;设置为我的.page-wrapper。我的... 查看详情

IE6 + IE7 CSS 溢出问题：隐藏； - 位置：相对；组合

】IE6+IE7CSS溢出问题：隐藏；-位置：相对；组合【英文标题】：IE6+IE7CSSproblemwithoverflow:hidden;-position:relative;combo【发布时间】：2011-01-2501:42:44【问题描述】：所以我为主页创建了一个滑块，它使用jQuery滑动一些带有标题和预告文本... 查看详情

DIV 大于父级，溢出：隐藏；位置：相对[重复]

】DIV大于父级，溢出：隐藏；位置：相对[重复]【英文标题】：DIVbiggerthanparentwithoverflow:hidden;position:relative[duplicate]【发布时间】：2017-02-0611:34:05【问题描述】：当祖先DIV的样式为overflow:hidden;position:relative;时，如何显示大于其祖... 查看详情

CSS溢出隐藏与父元素位置可见的奇怪效果[重复]

】CSS溢出隐藏与父元素位置可见的奇怪效果[重复]【英文标题】：StrangeeffectofCSSoverflowhiddenvs.visibleonpositionofparentelement[duplicate]【发布时间】：2019-12-2904:07:07【问题描述】：我从未读过任何内容表明元素的溢出属性会对我在这里看... 查看详情

仅在 Safari 中 - 位置：固定子级在父级为位置时被切断：固定且溢出：隐藏

】仅在Safari中-位置：固定子级在父级为位置时被切断：固定且溢出：隐藏【英文标题】：OnlyinSafari-position:fixedchildcutoffwhenparentisposition:fixedandoverflow:hidden【发布时间】：2014-12-2913:23:33【问题描述】：我只在Safari(6.1osx)中看到这个... 查看详情

怎样把标签中溢出的部分隐藏

...的插件会被自动放到这个插件的下方，而不在预先指定的位置。当内容小于指定高度时，也会自动缩小高度，以免页面留出太大空白区域而影响美观。“内容溢出时自动增加高度”的选择只能在必须这样设置时使用，以免使排版... 查看详情

如何使 CSS3 圆角在 Chrome/Opera 中隐藏溢出

...下工作，但在基于webkit的浏览器和Opera中，当父级相对或绝对定位时会中断。这适用于Firefox和IE9：C 查看详情

对于div隐藏css中有哪几种方式定义相对和绝对有啥区别啊

fixdisplay:none;完全不显示不计算流就是不占位置visibility:hidden不显示计算留占着位置只是不显示而已相对定位有staticrelative绝对定位有absolutefixedstatic就是相对于文档流定位不能通过TOP或者LEFT定位，relative也是相对于文档流但是可以... 查看详情

CSS - 绝对在固定范围内，滚动溢出和 100% 高度

】CSS-绝对在固定范围内，滚动溢出和100%高度【英文标题】：CSS-absolutewithinfixedwithoverflowforscrollingand100%height【发布时间】：2013-02-2012:48:45【问题描述】：我正在尝试使用某种可滚动的叠加层来屏蔽网站的其余部分。我的固定元素... 查看详情

无法在媒体查询中隐藏溢出-x

...度小于650像素时，它变为汉堡菜单。之后该菜单被定位为绝对并向右平移。当我点击汉堡菜单时，它会滑入视图。之后一切正常，但我不能让溢出消失。我尝试尝试向不同的父元素添加溢出，但无济于事。这是页面-https://badgerwan... 查看详情

css之元素显示隐藏，用户界面样式，文本溢出隐藏，精灵技术，三角形

...元素,同时还有显示元素的意思特点：隐藏之后不再保留位置；visibility可见性visibility设置或检索是否显示对象visibility:visible;对象可视visibility:hidden;对象隐藏特点：隐藏之后，继续保留位置；ov 查看详情

CSS溢出-x：可见；和溢出-y：隐藏；导致滚动条问题

】CSS溢出-x：可见；和溢出-y：隐藏；导致滚动条问题【英文标题】：CSSoverflow-x:visible;andoverflow-y:hidden;causingscrollbarissue【发布时间】：2011-09-1907:13:54【问题描述】：假设你有一些样式和标记：ulwhite-space:nowrap;overflow-x:visible;overflow-... 查看详情

边界半径和溢出：隐藏（离子应用程序）

】边界半径和溢出：隐藏（离子应用程序）【英文标题】：Border-radiusandoverflow:hidden(ionicapp)【发布时间】：2016-08-2210:48:07【问题描述】：边框半径和溢出有一些问题：隐藏在Ionic应用程序中。我有父母.dtc-zero-eye和.dtc-zero-iris孩子... 查看详情