Question

我正在努力实现附加布局。我试图让我的弹出式卡片位于背景div之上，但内容正在切断背景div结束的位置。

非常感谢您的帮助:) About Me Desired Layout

/*About Me Section*/

.about-me {
	position: relative;
	padding-top: 10%;
	height: 500px;
	margin-top: -7%;
	z-index: -1;
	background-color: #E5460E;
	clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 -100%);
}

.about-card {
	position: absolute;
	top: 20%;
	left: 0;
	margin: 0auto;
	z-index: 1000000;
	width: 80%;
	height: 500px;
	background-color: #fff;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.22);
}

<body>
	<div class="about-me">
		<div class="about-card">
			<div class="story">
			<div class="story-photo">
				<img class="story-me" src="About-Me.png">
			</div>
				<h3 class="story-title">My Story</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget lobortis orci. Vivamus iaculis lobortis dolor. Suspendisse ultricies nulla et ex aliquam laoreet. Donec nunc risus, posuere interdum efficitur id, dignissim eget enim. Duis bibendum ipsum eu malesuada porta.
				<br>
				Vivamus non neque orci. Aenean varius dolor posuere est fermentum porttitor. Maecenas id porttitor felis. Morbi facilisis, dui in semper consequat, nulla dolor semper massa, ac vehicula felis tortor nec eros. Sed quis ante eu diam efficitur laoreet.
				</p>
		</div>
	</div>
	
</body>

Answer 1

这是因为您的内容div（.about-card）位于.about-me div内，并且被CSS中的clip-path所截断。在名为.about-me的{{1}}内创建一个单独的div，并为其设置样式：

.about-me-background

/*About Me Section*/

.about-me-background {
	position: relative;
	padding-top: 10%;
	height: 500px;
	margin-top: -7%;
	z-index: -1;
	background-color: #E5460E;
	clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 -100%);
}

.about-card {
	position: absolute;
	top: 20%;
	left: 0;
	margin: 0auto;
	z-index: 1000000;
	width: 80%;
	height: 500px;
	background-color: #fff;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.22);
}

现在您将看到<body> <div class="about-me"> <div class="about-me-background"> </div> <div class="about-card"> <div class="story"> <div class="story-photo"> <img class="story-me" src="About-Me.png"> </div> <h3 class="story-title">My Story</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget lobortis orci. Vivamus iaculis lobortis dolor. Suspendisse ultricies nulla et ex aliquam laoreet. Donec nunc risus, posuere interdum efficitur id, dignissim eget enim. Duis bibendum ipsum eu malesuada porta. <br> Vivamus non neque orci. Aenean varius dolor posuere est fermentum porttitor. Maecenas id porttitor felis. Morbi facilisis, dui in semper consequat, nulla dolor semper massa, ac vehicula felis tortor nec eros. Sed quis ante eu diam efficitur laoreet. </p> </div> </div> </body>扩展到红色背景下方。

Answer 2

多德！尝试通过使用页眉，页脚，部分等之后的结构来简化并开发代码。试试这个片段，希望这对你有用！。

body{
margin:auto;
}

header{ 
height: 70%;
width: 100%;
background:red;
}

footer{
height: 30%;
width: 100%;
position:absolute;
background:#fff;
}

#insidebox{ /*align your css based on your requirement*/
position: absolute;
width: 300px;
height: 200px;
z-index: 15;
top: 50%;
left: 50%;
margin: -100px 0 0 -150px; /* adjust accordingly */
background: red;
border:1px solid;
background:white;  
}

.rotateCSS{
/*css goes here for rorating the text*/
}

<body>
<header>
<section id="rotateCSS">
<div> About Me </div>
</section>
</header>
<footer>
<section>
</section>
</footer>

<section id="insidebox">
<div>
    hello for box in center
</div>
</section>
</body>

Answer 3

试试这个，我把HTML作为......

<div class="about">
    <p>ABOUT ME</p>
</div>
<div class="about__content">
    ...
</div>

然后使用position: absolute来覆盖

希望对你有所帮助，兄弟

-

只是演示：CodePen

如何在不削减顶部div的情况下将div放在另一个div之上

3 个答案: