相关疑难解决方法(0)

我想将蓝色矩形容器z-index悬停在overflow该容器的元素上时，要比其他盒子更大。

第3局的z-index较大，但是我想访问Loser select下面的蓝色圆圈中的，但是我不能，除非我将鼠标悬停在蓝色矩形上方以获得焦点。

有没有一种方法可以仅使用CSS进行处理，还是需要JQuery？

我创建了一个Fiddle，它可以复制此内容，因此可以忽略任何JS错误，因为实际页面需要包含很多内容，但是问题是完整的。将鼠标悬停在第四项游戏上，该游戏具有三个下拉菜单：源，池，种子。您可以选择种子就好了。但是，将鼠标悬停在顶部的另一个游戏上，然后回到“种子”，除非再次将鼠标悬停在“游泳池”上，否则您无法选择它。无论溢出是什么，我都需要始终选择“种子”。

https://jsfiddle.net/cblaze22/qp4L15tj/8/

游戏悬停的当前代码（蓝色矩形区域）

.forward在蓝色矩形区域上放置了一个大的zindex。

$(element).hover(
                function () {
                    if (!$(this).parent().hasClass('editing')) {
                        $(this).addClass('forward');
                    }
                },
                function() {
                    $(this).removeClass('forward');
                }
            );

我正在使用多个面板,我添加了扩展/折叠它们的功能.我的问题是,当我展开它们时,我会看到所有面板中的一个丑陋的腐败文本.有谁知道如何解决这个问题？这是我的工作代码: PLUNKER

 <p-panel header="Panel 1" [toggleable]="true" [collapsed]="collapsed" [style]="{'margin-bottom':'20px'}">

 The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent …

An <img>，后跟一个<p>负边距的a。在<p>边框和背景是否下img。我不明白为什么。在Firefox和Chromium中相同。谢谢 ！

#d1 {
  width:400px;
}
#d1 img {
  max-width:350px;
}
.caption {
  color:red;
  font-size:2em;
  border:3px solid red;
  margin-top:-40px;
  background:#eee;
  padding:10px;
  /*position:relative;*/
}

<div id="d1">
  <img src="https://i.kym-cdn.com/entries/icons/mobile/000/018/012/this_is_fine.jpg">
  <p class="caption">This is fine.</p>
</div>

添加position:relative到.caption解决问题，但不回答这个问题。

密码笔

请看下面这个非常简单的片段来说明我的问题：

#container {\r\n  position: relative;\r\n  padding: 20px;\r\n  border: 2px solid gray;\r\n}\r\n\r\n#back {\r\n  position: absolute;\r\n  top: 0;\r\n  bottom: 50%;\r\n  left: 0;\r\n  right: 0;\r\n  background-color: #bbb;\r\n}

<div class="col-sm-12" id="container">\r\n  <div id="back"></div>\r\n  <h1>Some Text</h1>\r\n</div>

\n\n

在 HTML 代码中，标记h1位于元素之后。back

由于我没有改变它的position属性，所以它一定是static。\n而且，据我所知，static元素是根据页面的流程定位的。

那么\xe2\x80\xa6 为什么绝对定位div 显示在其同级之上h1？

我期待在后面看到它，h1因为它是第一位的。

请注意，我知道如何纠正这种行为，我只是问为什么！

带有更正的片段：

#container {\r\n  position: relative;\r\n  padding: …

更新:Firefox上不显示以下行为.

让我们从以下情况开始:

html {
  background: red;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: green;
}

div {
  min-height: 50px;
  background-color: pink;
  margin-bottom: 50px;
}

<div></div>

身体用a定义,min-height:100vh我们有一个滚动条,让我们可以看到html.在这里我们有一个保证金塌陷,的边缘div被折叠与机身保证金,从而创造了身体和滚动条后,这个空间.

如果我们参考规范,我们就有这种情况:

当且仅当以下情况时,两个边距相邻:

...

如果父项具有"自动"计算高度,则最后一个流入子项的下边距和其父项的下边距

这div是最后一个流入元素,body并且高度自动,因为我们只指定了最小高度.

现在让我们添加更多可能受此边际影响的元素,并保持边距折叠规则.唯一的方法是添加浮动元素以保持我们div始终是最后一个in-flow元素.

这是新代码:

html {
  background: red;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: green;
}

div {
  min-height: 50px;
  background-color: pink;
  margin-bottom: 50px;
}
.l { …