如何让父元素出现在child之上
要让父元素出现在子元素之上，可以使用CSS中的z-index属性。z-index属性用于指定元素在Z轴上的堆叠顺序。数值越高，元素在Z轴上的堆叠顺序越高，越容易被看到。
可以在父元素和子元素的CSS样式中设置z-index属性，例如：
.parent {
position: relative;
z-index: 1;
}
.child {
position: absolute;
z-index: 2;
}在这个例子中，父元素的z-index值为1，子元素的z-index值为2，所以子元素会出现在父元素之上。
需要注意的是，z-index属性只适用于定位元素（position属性值为relative、absolute、fixed或sticky），因此需要在父元素和子元素的CSS样式中设置position属性。
相关·内容
1回答
我很难弄清楚为什么一个元素在Vue中不会相对于它的父元素保持固定。它只与#app相关。在Vue中，如何让一个位置为fixed的子元素成为父元素的100%。
HTML：
<div id="app">
<div class="parent_relative">
<div class="child_fixed"></div>
</div>
</div>
CSS：
.parent_relative{
position: relative;
w
浏览 37提问于2021-02-16得票数 0
给定以下模型：
create table child_parent (
child number(3),
parent number(3)
);
给定以下数据：
insert into child_parent values(2,1);
insert into child_parent values(3,1);
insert into child_parent values(4,2);
insert into child_parent values(5,2);
insert into child_parent values(6,3);
结果出现在以下树中：
1
浏览 5提问于2013-04-28得票数 1
回答已采纳
1回答
在顶层组件的样式块中，我定义了一个/deep/ css类，用于设置将出现在其ng-content中的任何项的边距。如何才能使css类具有优先权-即使子组件应用其自己css类并定义了不同的页边距。
例如：
ParentComponent.ts：
@Component({
selector: 'my-parent',
styles: [`
/deep/ .child-item { /* I WANT THIS TO TAKE PRECEDENCE */
margin-right: 10px;
margi
浏览 0提问于2016-10-07得票数 0
2回答
我有一个父类，父类，它有一对一的关系，与一个子类，子类。
当我添加一个新的父级时，我想同时向父级添加一个子元素。
以下是我的课程：
public class Parent
{
public virtual int Id { get; }
public virtual Child Child { get; set; }
}
public class Child
{
public virtual int Id { get; }
public virtual Parent Parent { get; set; }
}
我使用的是NHibernate和这里概述的Has
浏览 2提问于2017-11-02得票数 4
回答已采纳
2回答
由于CSS的诡计，比如负边距，有时我会在HTML文档中稍后出现的HTML内容下呈现一些HTML。尽管从技术上讲，原始元素应该在后面的元素下面，但我还是想显示后面的元素。
有没有可能在不指定绝对位置的情况下让一个HTML元素出现在另一个元素之上？在没有绝对位置的情况下，z索引似乎没有任何效果。
浏览 1提问于2012-03-13得票数 45
回答已采纳
2回答
如何堆叠此Z索引配置？
、、、
我遇到了这样的情况：
我的层次结构是：
box1: (z-index: 5000)
-(other parent elements)
-box1_child (z-index: 5001)
box2 (z-index: 5000)
-(other parent elements)
-box2_child (z-index: 5002)
因此，很明显，我希望box1和box2处于同一级别。我想让box1_child坐在box2旁边。我想让box2_cihld坐在box1_child旁边。
但它不能工作(在FF4中)，基本上，box1_child不是坐在box2上。
这是可
浏览 1提问于2013-07-11得票数 1
回答已采纳
如何根据具有绝对位置的子元素高度来增加具有相对位置的父元素的高度。
在下面的示例中，.parent元素的高度显示为0px
PS:我不想使用任何脚本
预期：
我得到了什么：：
HTML:
<div class="parent">
<div class="child" style="top:20px;">Hello</div>
<div class="child" style="top:40px;">Some content&
浏览 1提问于2021-11-18得票数 6
我正在使用Flexbox的第一步。我在这里做过：
如何将图像标题移到图像下面？
<div class="flexbox-container">
<div class="flexbox-child">
<img src="http://placehold.it/300x400"><br>
<h4>This title should go below the image</h4>
</div>
<div c
浏览 3提问于2015-09-03得票数 0
回答已采纳
*parent Component*
<div class="row">
<div class="col-xs-12">
while accessing my child component in my parent component i am unable to
get the access if I use ngfor Directive
<app-server *ngFor="let element of serverElements"
[elements]
浏览 11提问于2018-02-03得票数 0
1回答
我已经创建了一个html内容，它有一个名为parent-portlet的父div。parent-portlet类的height设置为40%。html正在正确地重命名，但问题是子div (child-fluid)高度没有应用到父div (parent-portlet)的高度。
有谁能告诉我这个问题的解决方案吗？
我的代码如下所示
<div class="parent-portlet">
<div class="child-fluid">
<div class="box">
浏览 3提问于2015-12-12得票数 1
回答已采纳
1回答
我在我的超文本标记语言中有一个<a>标记，当用户单击链接时，我需要一个下拉列表来始终显示在下面。如果不使用click事件，它看起来如下所示：
HTML
<a class="parent">Learn more</a>
<div class="child">This is the stuff for learning more</div>
CSS
.parent {
position: relative;
}
.child {
position: absolute;
}
但是，如果a标记之前有内容
浏览 2提问于2016-10-26得票数 1
3回答
用例
创建一对一关系的用例是什么?在这种关系中，父节点指向子节点，而子节点指向父节点？如果没有不同之处，是否有一种优先于另一种？
示例
+---------+ +-------+ +--------+ +----------+
+ Parent + + Child + + Parent + + Child +
+---------+ +-------+ vs. +--------+ +----------+
+ idChild + --> + id + + id + <--
浏览 0提问于2014-03-20得票数 1
回答已采纳
1回答
我加入了一个材料浮动按钮到我的网页和功能是完美的工作方式，我希望它。我唯一的问题是，我为他们设置的图标不是以中心为中心，而是出现在按钮的顶部。看来css线高不起作用.
显示在我的网页上的图片：
材料的链接.浮动按钮：
图标应该位于何处的演示链接：
HTML代码：
<ul class="mfb-component--br mfb-zoomin" data-mfb-toggle="hover">
<li class="mfb-component__wrap">
<!-- the main menu but
浏览 1提问于2017-10-27得票数 0
回答已采纳
2回答
我在CSS中遇到了一些奇怪的东西，我找不到任何解释。
使用position: absolute，div a被拉到另一个div b之上。当div b(位于a下面)有一个带有position: relative的子元素时，该元素出现在a的上方。
var parent = document.querySelector('.parent')
document.querySelector('button').addEventListener('click', function() {
parent.classList.toggle('tog
浏览 5提问于2017-11-11得票数 0
4回答
基本上，我希望这样做，但这不起作用。如何才能在不将其移动到DOM中的不同位置的情况下获得所需的结果？
<div id="parent">
<div id="child">
</div>
</div>
#parent {
z-index: -1
}
#child {
z-index: 999999;
position: absolute
}
浏览 0提问于2017-02-27得票数 1
我有两个实体：
public class Parent()
{
public ICollection<Child> Children { get; set; }
}
public class Child()
{
public Parent Parent { get; set; }
}
映射如下所示：
public class ParentMap : ClassMap<Parent>
{
HasMany(x => x.Children).Cascade.All().Inverse();
}
public class ChildMap :
浏览 0提问于2010-03-11得票数 1
回答已采纳
如何用jQuery包装元素。我让它处理不同的div，但只包装到div分离！
我有：
<section>
<div class='parent'>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
</div>
<div class=&
浏览 3提问于2015-03-04得票数 0
我在媒体查询中添加了position:relative和z-index:-10在#content上，767像素用于解决小屏幕上的一些问题，#content有很多动态生成的子产品。但是由于#content上添加的样式子悬停不起作用，产品也不能点击。
HTML
<div id="content" >
<div id="products" class="row list-group">
<div class="child-product">...</div>
浏览 3提问于2016-02-01得票数 3
回答已采纳
在AngularJS 1.2中，如果我使用父动画，子动画不起作用。
如果我注释掉app.animation('.parent', function () { .. }，那么该子动画将正确启动。
如何让父动画和子动画同时工作？
HTML：
<button ng-click="anim.toggleParent()">reveal parent</button>
<button ng-click="anim.toggleChild()">reveal child</button>
<div cl
浏览 3提问于2013-10-21得票数 1
2回答
如何在相对父容器中包含绝对子容器
、、、、
有没有办法让相对父高度容器根据他的绝对子高度增长？
.relative-parent {
background: red;
position: relative;
text-align: center;
}
.absolute-child {
background: yellow;
position: absolute;
top: 0;
}
<div class="relative-parent">
<p> Parent div content </p>
<div class="absol
浏览 1提问于2019-03-15得票数 0
3回答
停止从冒泡事件到父事件
、、、
我有以下情况
<div id="parent">
<div id="child"></div>
</div>
和一些css
div:active { background-color: green }
当单击#child时，是否有一种更好的方法只让#child获取active。我试过了
$('#child').click(function (e) {
e.stopImmediatePropagation();
e.stopPropagation();
e.preven
浏览 1提问于2015-06-09得票数 0
回答已采纳
我制作的颤动动画遇到了问题。我将容器的高度动画化为0，容器内的内容会溢出。
//Parent
Container(
width: screenWidth,
height: panelHeight // ----------------------------------> This is the height that changes
child: Builder(builder: ((context) {
// returns the code below
浏览 0提问于2019-12-27得票数 0
我是新手，我试图了解如何在用户Moor将一些数据保存到sqlite表中的应用程序中使用提供程序状态管理。我的应用程序是一个任务记录应用程序。当我打开底部工作表添加一个任务时，我在小部件树中得到了上面的错误。我用的是provider: ^4.3.1
class TaskView extends StatelessWidget {
DateTime selectedDate = DateTime.now();
@override
Widget build(BuildContext context) {
return Provider<TaskViewModel>(
浏览 2提问于2020-07-26得票数 0
回答已采纳
如何使用jQuery在父元素中找到可见的子元素？
例如，尝试了以下方法(以及其他许多方法)，但都不起作用。
var childelement = $("#parent").find(".child:visible");
父元素中有许多子元素，但同一时间只有一个是可见的。所有子元素都使用相同的类名进行定义。
编辑:在我的代码中，使用display属性将子元素定义为可见或不可见。类似于下图：
<span class="child" style="display: inline;">One</li>
<sp
浏览 0提问于2014-04-15得票数 0
1回答
我有一个类似于下面的分类法：
Parent Term 1
Child 1.1
Child 1.2
Parent Term 2
Child 2.1
Child 2.2
如何将特定的内容类型限制为特定的术语？
例如，我想强制"News Item“只出现在"Parent Term 2”中，这样在内容创建页面上，只有该分类术语才会出现在分类选择项中？
浏览 0提问于2010-07-30得票数 1
回答已采纳
在一个响应式网站上工作，我想删除某个元素，但是，我希望该子元素仍然显示。
将父元素的CSS规则设置为display:none；将删除该元素及其所有子元素。如果我将子元素设置为display:block，它仍然不会出现在站点上。
如下所示：
HTML：
<div id="parent">
<div id="child">Some text.</div>
</div>
CSS：
#parent {
display:block;
width:500px;
height:200px;
background:blue;
}
浏览 0提问于2013-05-16得票数 1
回答已采纳
我对飞镖很陌生，我把我的应用程序设置成这样：
class MyExpensesApp extends StatefulWidget {
const MyExpensesApp({Key? key}) : super(key: key);
@override
State<MyExpensesApp> createState() => _MyExpensesAppState();
}
class _MyExpensesAppState extends State<MyExpensesApp> {
@override
Widget build(B
浏览 1提问于2021-12-09得票数 0
回答已采纳
2回答
所以我尝试使用一些css动画背景。看起来是这样的：
粒子徘徊在菜单列表的上方(现在它只是“测试”)。我的粒子代码用css表示：
.circles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.circles li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgb(17
浏览 4提问于2022-11-25得票数 0
回答已采纳
假设有两个实体:父实体和子实体，其中@OneToMany从父实体映射到子实体。
class Parent {
@Column(name="id")
private Long id;
@OneToMany(cascade=CascadeType.ALL, fetch = FetchType.LAZY)
@JoinColumn(name = "parent_id", referencedColumnName = "id")
private List<Child> children;
}
clas
浏览 2提问于2015-01-11得票数 4
回答已采纳
好的，我之前收到的一个答案是，效果真的很好。然而，在已知的问题中，它提到以下几点：
而且，这在UserControls中无法立即工作，因为AdornerLayer.GetAdornerLayer(AdornedElement)将在UserControls中返回null。通过查找AdornerLayer的父级(或者父级的父级，递归地)，可以很容易地解决这个问题。这样做是有功能的。
因此，我大部分时间使用的代码都很棒，但是当我尝试在tabcontrol.Instead中的一个元素上使用这个具有所需效果的元素时，我遇到了一个问题，模糊效果只适用于TabItem，而不是整个窗口。此外，tabI
浏览 5提问于2015-08-06得票数 3
回答已采纳
3回答
我有7个div，所有的内容都很少。我想让前3行，然后是下3行，以此类推。
<div class="parent">
<div class="child-a">abc</div>
<div class="child-b">def</div>
<div class="child-c">ghi</div>
<div class="child-d">jkl</div>
<div class="
浏览 0提问于2011-07-20得票数 1
回答已采纳
2回答
我正在寻找一个非常简单的解决方案(使用jQuery)，让一个小的弹出式div出现在我点击的任何链接旁边。我知道如何让div显示和隐藏，但问题是我不知道如何让它们出现在我调用它们的链接旁边。
如果我可以为所有的弹出窗口使用相同的div，无论我点击哪个链接，那就太好了。我不是在寻找一个完成的插件，只有这个基本功能。
浏览 0提问于2010-09-19得票数 1
回答已采纳
2回答
Z-指数不生效？
、、、
我试图使用背景图像，在它的顶部有div。所有的元素都有位置属性，我目前给了背景图像50%的不透明度，这样我就可以看到它的背后了。div‘包装器’的z-索引高于图像，但仍然出现在后面。此外，它在页面底部，我希望它出现在顶部，并有一个高度，如果100%。
下面是我目前看到的图片：
如您所见，div位于图像后面，只能因为图像不透明而被看到。
任何帮助都将不胜感激，谢谢。
浏览 3提问于2017-02-11得票数 1
回答已采纳
1回答
我有两个部分，第一部分是使用相对位置，里面包含2个绝对子对象，其中的子对象被覆盖。第二部分包含一个标题。
我想保持第一部分的相对位置在流程中，所以第二部分出现在下面。我知道position absolute接受文档流之外的元素，但即使是相对父级也是这样吗？
怎样才能让父级保持在流中？
.parent {
position: relative;
}
.child {
color: white;
position: absolute;
width: 100%;
}
.child1 {
background-color: red;
z-index
浏览 9提问于2017-08-29得票数 0
我有一个id为#parent的容器，我动态添加了几个.child类的图像，可以假设.child元素的宽度和高度是固定的。
我想让所有的.child一个接一个地浮动，以构建一个水平列表。如何让#parent自动调整到所有.child的总宽度？
非常感谢!
PS:我需要一个纯粹的CSS解决方案..
小提琴：
可以在这里找到解决方案：
浏览 0提问于2013-03-16得票数 1
回答已采纳
2回答
我的身体里有三个div:一个容器，一个父母和一个孩子。
我正试着让孩子在左边的父母之外伸长。
但是如果我用position: absolute这样做，父母就不会伸展到期望的高度.
position: static
position: absolute
使用margin-left: -20px也做不到:最终，我将有其他嵌套的父级，并且需要所有的子级扩展到外部左侧。
到目前为止她的密码是我的：
#container {
position: absolute;
width: 300px;
}
.parent {
margin-left: 20px;
}
浏览 6提问于2014-05-06得票数 2
1回答
我有一个有水平溢出的父级。我想要基于(触摸)相对于左侧的滚动位置的子项(和子项)的位置。我尝试过的每个JS函数都会返回固定位置。
<div class="parent"> <div class="child-one"></div> <div class="child-two"></div> </div>
.parent { overflow-x: scroll; overflow-y: hidden; width: 100vw; } .child-one,
浏览 11提问于2019-11-22得票数 0
回答已采纳
我想让我的列表(nav)对齐到图像(徽标)的中心。我试着使用vertical-align: middle;，但当我左右浮动图像时，我无法让它工作。
下面是我的代码：
HTML：
<div id="head">
<img id="logo" src="logo.png" />
<ul id="nav">
<li><a href="#">Item 1</a></li>
<li>
浏览 1提问于2010-03-14得票数 3
回答已采纳
在不知道父元素的情况下，我想不出选择第n个元素、最后一个元素或第一个元素的方法。nth-child是存在的，但仅适用于子进程，例如：
<div>
<p>One</p>
<p>Two</p>
</div>
p:last-child选择"Two“段落，p:first-child选择"One”段落。但是，如果我有动态代码，却不知道父名称是什么，甚至不知道父名称到底是什么(可能是div、span、锚、ul等)，该怎么办呢？
例如：
<youdontknowwhat!>
<p cl
浏览 2提问于2010-11-16得票数 7
回答已采纳
3回答
我有一个父div，它有position: relative，他的子div有position: absolute。这样的职位是必须的。问题是父对象不能拉伸到子对象的高度。问题是如何让它伸展到孩子的高度？
标记类似于以下内容：
<!DOCTYPE HTML>
<html>
<head>
<style>
.parent {
position: relative;
border: solid 1px red;
}
浏览 1提问于2011-01-15得票数 0
我总共有3个divs如何让它们出现在下面的图像中。
我可以使用float:left将两个放在一起，但是第三个会一直放在div A下面。
有什么想法吗？
谢谢
浏览 0提问于2014-03-27得票数 0
1回答
<span class='parent'>Parent<span class='child'> and child</span></span>
如果我这么做：
.parent {
background-color: green;
}
所有的文本都有一个绿色的背景色。但如果我加上这个：
.child {
float: right;
}
孩子不再保留这一财产。我可以对孩子做background-color，但我需要两者之间的空间突出显示。
有办法这样做吗？
Jsfiddle：
浏览 2提问于2012-05-12得票数 1
回答已采纳
我有这个html：
<div class="foo parent">
<div class="child"></div>
</div>
使用一些css：
.foo{
position:absolute;
left: -117px;
background:#000000 none repeat scroll 0 0;
color:#FFFFFF;
z-index:8;
}
.parent{
浏览 4提问于2009-09-14得票数 2
回答已采纳
这让我很头疼。我在IE (6/7)中遇到了下面的代码问题。
我在一个页面上有一些相对定位的容器项目。在其中一个里面是一个绝对定位的物品。此内部项目应出现在任何容器项目的上方。这在Safari和Firefox中正确显示，但在IE中不显示。
我已经包含了一个非常精简的示例，供您查看。我不能删除容器上的position: relative；或内部项上的position: absolute；，因为这最终将是一个html下拉项。
非常感谢你的帮助。
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
&
浏览 0提问于2009-05-15得票数 3
回答已采纳
我正在研究这个线程：和，我的问题是我们如何来回地做这件事？
这是完美的工作方式。我可以来回拖动绳子。
我的目标是让它看起来像这样。
将全部移动到父div。
将全部移动到子div
但当我试图用按钮移动它时，
<button type="button" onclick="Parent()">
Move From Parent to Child
</button>
<button type="button" onclick="Child()">
Move Fr
浏览 1提问于2019-11-29得票数 3
回答已采纳
我想不出一种优雅的方式让我的div在CSS中按如下方式显示
---------------------------------------------------------
| |
| child div 1 child div 2 child div 3|
| |
-------------------------------------
浏览 0提问于2011-12-15得票数 2
回答已采纳
当我想在居中的父div中向左或向右浮动子div时，整个设计会向左或向右移动，具体取决于浮动。那么，如何浮动子div，并使居中的父div居中。
HTML：
<div id="parent">
<div id="child-left"></div>
<div id="child-right"></div>
</div>
CSS：
#parent{
padding: 0 auto;
width: 600px;
}
#child-left{
float: le
浏览 3提问于2012-10-10得票数 4
回答已采纳
我有一个parentComponent和几个childComponents，如下所示：
<parent-component>
<child-component> child_1 </child-component>
<child-component> child_2 </child-component>
</parent-component>
ParentComponent：
Polymer({
is: 'parent-component',
listeners: {
浏览 4提问于2017-08-04得票数 1
目前我正在使用Firebase存储我的数据，我现在发布了一个uicollectionview单元格，它出现在表格的底部。我正在尝试让单元格首先出现在顶部。首先是新创建的单元格，然后是较旧的单元格，以沿UIcollectionview向下发布。(就像twitter或instagram一样)。我下面的代码是如何创建一个单元格并保存到Firebase。
// MARK: Firebase Database saving posts
func fetchData() {
ref?.child("posts").observeSingleEvent(of:
浏览 2提问于2017-07-13得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
