Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/35.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 将绝对div放置在溢出y中:滚动div_Css_Scroll_Position_Overflow_Absolute - Fatal编程技术网

Css 将绝对div放置在溢出y中:滚动div

Css 将绝对div放置在溢出y中:滚动div,css,scroll,position,overflow,absolute,Css,Scroll,Position,Overflow,Absolute,我有以下HTML: <div class="container"> <div class="scrollable-block"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown

我有以下HTML:

<div class="container">
<div class="scrollable-block">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    <div class="absolute-div"></div>
</div>
下面是一个现场演示:

绿色div是容器,具有固定的宽度。黄色div位于其内部,具有最大高度和overflow-y:scroll。它的宽度应该与绿色的宽度相同。我试图绝对定位紫色div,相对于黄色div,但在绿色div之外-原因是我不希望黄色div有水平滚动条。这可能吗


谢谢大家!

如果您不需要水平滚动条,只需将
溢出:滚动到

overflow-y:scroll;
overflow-x:hidden;

您不能使用当前标记执行此操作。绝对div将始终触发水平滚动条,因为它嵌套在可滚动块中。似乎现代浏览器不允许overflow-x:visible与overflow-y:scroll一起使用。

我认为不可能将绝对div从滚动块中弹出。我遇到了同样的问题,我就是这样解决的:

 <div class="absolute-div"></div> // replace it, put it in the main container.

 $(".absolute-div").css({"top":play with this+"px"}); 
// on scroll of the "scrollable-block" change the ".absolute-div" "top" property using Jquery.
//将其替换,放入主容器中。
$(“.absolute div”).css({“top”:玩这个+“px”});
//在滚动“可滚动块”时,使用Jquery更改“.absolute div”“top”属性。

也许您可以将position:relative置于.container上,而不是.scrollable block上?这对您合适吗?不,它需要相对于.scrollable块。这是一个更复杂结构的缩略示例,需要以这种方式运行。是的,但这样绝对(紫色)div保持隐藏。奇怪的是,紫色块在可滚动块的右上角可见。有没有办法让绝对div超出容器div?Z索引似乎不起作用。@YavorPunchev-在不更改HTML(或使用JavaScript更改HTML/DOM)的情况下不起作用
 <div class="absolute-div"></div> // replace it, put it in the main container.

 $(".absolute-div").css({"top":play with this+"px"}); 
// on scroll of the "scrollable-block" change the ".absolute-div" "top" property using Jquery.