当前位置: 首页 > 面试题库 >

CSS溢出隐藏在绝对位置

朱自明
2023-03-14
问题内容

我一直在努力奋斗。我想绝对定位将在div中移动的图像,并希望剪切超出div的任何内容。这是问题的示例:

<html>
<body>
  <div style="width: 500px; height: 200px; border: 1px solid black; overflow: hidden;">
    <div style="width: 200px; height: 50px; margin: auto; border: 1px solid black; background: gray;">On top of image.</div>
    <div style="position: absolute; top: 10px; left: 250px; z-index: -1;"><img src="http://www.google.com/logos/worldcupfinale10-hp.gif" /></div>
  </div>
</body>
</html>

因此,我希望徽标的右边缘不显示。有想法吗?


问题答案:

由于图像的容器是绝对放置的,因此它不在“包含” div的范围之内。

您的选择是使用jQuery动态定位相对位置或调整绝对定位div的尺寸。



 类似资料:
  • 问题内容: 我需要显示大于其父元素的子元素,但不删除overflow:hidden;。这可能吗?parent元素的 子元素一旦脱离父边界,就会被剥离。 (元素定义了其他的css,我只是为了清楚起见放置了样式属性) 问题答案: 这是完全不可能做到你想要什么都和父..相反,你可以引入额外的儿童并移动到这一点。 HTML: CSS:

  • 问题内容: 我们有两个DIV,一个嵌入另一个。如果外部DIV的位置不是绝对的,则内部DIV的位置绝对是不遵守外部DIV所隐藏的溢出的。 是否有机会使内部DIV服从外部DIV的隐藏溢出,而无需将外部DIV设置为绝对位置(因为这会破坏我们的完整布局)?相对于内部DIV的相对位置也不是一种选择,因为我们需要“增长”到表TD(exmple)。 还有其他选择吗? 问题答案: 制作外,以和内到。它应该为您工作

  • 问题内容: 因此,我为主页创建了一个滑块,该滑块使用jQuery滑动了一些带有标题和预告文本的图像。一切正常,我去检查IE,发现IE 6和IE 7完全杀死了我的滑块CSS。我不知道为什么,但是由于某些原因,我无法隐藏带有溢出的非活动幻灯片。我试图来回调整css,但是还无法弄清楚是什么原因引起的。 我在一个更加孤立的html页面中重新创建了该问题。 我已经找到了 关于导致溢出的ul元素:隐藏不起作用

  • 问题内容: 我在w3schools上阅读了以下代码,但不了解该属性如何影响文本是否显示在右侧。 我知道它用于处理超出范围的内容,但不了解它在这种情况下如何应用。 问题答案: 我尽力消除混乱: 是一个块级元素,与元素一样(它们延伸到父宽度的100%)。这就是为什么默认情况下,如果在这些元素上未声明宽度或显示,它将显示在if 下方的原因。 现在在您的示例中,仅包含浮动元素。这使其折叠到一个高度(尽管如

  • 问题内容: 因此,我为主页创建了一个滑块,该滑块使用jQuery滑动了一些带有标题和预告文本的图像。一切正常,我去检查IE,发现IE 6和IE 7完全杀死了我的滑块CSS。我不知道为什么,但是由于某种原因,我无法隐藏带有溢出的非活动幻灯片。我试图来回调整css,但是还无法弄清楚是什么原因引起的。 我在一个更加孤立的html页面中重新创建了该问题。 我已经找到了 关于导致溢出的ul元素:隐藏不起作用

  • 在下面的代码中, 我有一个父div(.parent)和三个子div(.child1、.child2、.child3) 要求- 。儿童2应该重叠。儿童3 。child2应该可以水平滚动 问题- 使用绝对位置设置overflow-x不起作用。 如何使此表可滚动,以及使其与下面的所有div重叠? 企图-