Question

我似乎无法让z-index正常工作。关于此问题有很多StackOverflow问题，但在大多数问题中，问题是未设置位置。我已经设定了位置，但我仍然无法让它发挥作用。我希望带有文字的方框位于灰色栏的顶部。

任何指导都将不胜感激。

.pictures{
    height: 45vh;
    background-color: gray;
    position: relative;
    z-index: 0;
}
.main{
    margin-top: -30vh !important;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
}

<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" type="text/css">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue_grey-blue.min.css" />
    <link rel="stylesheet" href="/personal-site-page.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
    <div class="mdl-layout">
        <div class="pictures"></div>
        <div class="mdl-layout__content">
            <div class="main mdl-grid">
                <div class="mdl-cell mdl-cell--2-col"></div>
                <div class="mdl-cell mdl-cell--8-col mdl-shadow--4dp">
                    <h3>Title</h3>
                    <p>
                        Cillum dolor esse sit incididunt velit eiusmod magna ad nostrud officia aute dolor dolor. Magna esse ullamco pariatur adipisicing consectetur eu commodo officia. Ex cillum consequat mollit minim elit est deserunt occaecat nisi amet. Quis aliqua nostrud Lorem occaecat sunt. Eiusmod quis amet ullamco aliquip dolore ut incididunt duis adipisicing. Elit consequat nisi eiusmod aute ipsum sunt veniam do est. Occaecat mollit aliquip ut proident consectetur amet ex dolore consectetur aliqua elit.
                    </p>
                    <p>
                        Cillum dolor esse sit incididunt velit eiusmod magna ad nostrud officia aute dolor dolor. Magna esse ullamco pariatur adipisicing consectetur eu commodo officia. Ex cillum consequat mollit minim elit est deserunt occaecat nisi amet. Quis aliqua nostrud Lorem occaecat sunt. Eiusmod quis amet ullamco aliquip dolore ut incididunt duis adipisicing. Elit consequat nisi eiusmod aute ipsum sunt veniam do est. Occaecat mollit aliquip ut proident consectetur amet ex dolore consectetur aliqua elit.
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>

Answer 1

带有z-index的{p> position: relative最适合使用彼此相邻的元素

然后，您需要在文本的最父div（本例中为mdi-layout__content类）上设置z-index，它位于图片div旁边

＆＃13;

.pictures {
	height: 45vh;
	background-color: gray;
	position: relative;
	z-index: 0;
}
.mdl-layout__content {
    margin-top: -30vh !important;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
}

＆＃13;

<html>
<head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Title</title>
	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" type="text/css">
	<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue_grey-blue.min.css" />
	<link rel="stylesheet" href="/personal-site-page.css" />
	<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
	<div class="mdl-layout">
		<div class="pictures"></div>
		<div class="mdl-layout__content">
			<div class="main mdl-grid">
				<div class="mdl-cell mdl-cell--2-col"></div>
				<div class="mdl-cell mdl-cell--8-col mdl-shadow--4dp">
					<h3>Title</h3>
					<p>
						Cillum dolor esse sit incididunt velit eiusmod magna ad nostrud officia aute dolor dolor. Magna esse ullamco pariatur adipisicing consectetur eu commodo officia. Ex cillum consequat mollit minim elit est deserunt occaecat nisi amet. Quis aliqua nostrud Lorem occaecat sunt. Eiusmod quis amet ullamco aliquip dolore ut incididunt duis adipisicing. Elit consequat nisi eiusmod aute ipsum sunt veniam do est. Occaecat mollit aliquip ut proident consectetur amet ex dolore consectetur aliqua elit.
					</p>
					<p>
						Cillum dolor esse sit incididunt velit eiusmod magna ad nostrud officia aute dolor dolor. Magna esse ullamco pariatur adipisicing consectetur eu commodo officia. Ex cillum consequat mollit minim elit est deserunt occaecat nisi amet. Quis aliqua nostrud Lorem occaecat sunt. Eiusmod quis amet ullamco aliquip dolore ut incididunt duis adipisicing. Elit consequat nisi eiusmod aute ipsum sunt veniam do est. Occaecat mollit aliquip ut proident consectetur amet ex dolore consectetur aliqua elit.
					</p>
				</div>
			</div>
		</div>
	</div>
</body>

＆＃13;

Answer 2

包含您要叠加的内容的div的{{1}}和overflow-x属性分别设置为overflow-y和hidden。这些样式来自您正在使用的材质CSS文件。

修复方法是覆盖这些规则，以便溢出容器的内容可见。我们将auto和overflow-x设置为overflow-y：

visible

注意我还在.overflow-fix.mdl-layout__content { overflow-x: visible; overflow-y: visible; }添加了overflow-fix类，以便此修复程序可以选择加入。

查看更新的JSFiddle here。

Z-index不工作（是的，位置设置）

2 个答案: