时间戳

首页 > 解决方案 > flexbox 列中的重叠 div

html - flexbox 列中的重叠 div

问题描述

我正在创建一个 MailChimp HTML 电子邮件模板并对结构进行排序。

我有一个我在 illustrator 中创建的图像，我想作为midContent. 我希望这个背景图像的浅蓝色部分与上面的图像重叠。我试过使用z-index，但它似乎不起作用。该flex-box列是否适合此类任务，还是我应该使用其他内容？

		.templateContainer{
			max-width:450px !important;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
		}

		#templateHeader img {
			text-align: center;
			height: 150px;
			padding: 5px 0;
		}

		#templateHeader, #postheader {
			text-align: center;
		}

		#postheader {
			height: 75px;
			background-color: #EAEAEA;
		}

		#postheader-container {
		  	width: 90%;
		  	height: 100%;
		  	margin: 0 5%;
		}

		#postheader-container p {
			text-align: center;
			font-family: helvetica-light;
			font-size: 14px;
			color: #039FD6;
			margin: 0 auto;
			padding: 20px 0px;
		}

		#templateBody {
			height: 495px;
		}

		.center {
			display:flex;
			align-items:center;
			justify-content:center;
		}

		#topContent {
			height: 225px;
			width: 100%;
		}

		#topContent img {
			width: inherit;
		}

		#midContent {
			background-image: url("https://i.ibb.co/qsfyckt/Untitled-1.png");
			z-index: 1;
			background-size: cover;
			background-position: 100% 0%;
			width: 100%;
		}

		#midContent p {
			padding: 40px 25px 0px 25px;
			text-align: center;
			color: #ffffff;
			font-family: helvetica-light;
			font-size: 16px;
			margin: 0 auto;
		}

		#bottomContent {
			width: 100%;
			height: 125px;
			margin-top: 1%;
		}

		#bottom-container {
			height: auto;
		  	width: 70%;
		  	margin: 0% 15% 0% 15%;
		}

		#bottom-container button {
			width: 85%;
			padding: 10px;
			margin: 3% 7% 0 7%;
			font-family: helvetica-light;
			font-weight: bold; 
			font-size: 12px;
			color: #ffffff;
			background-color: #0B409E;
			text-transform: uppercase;
			border-radius: 8px;
			border-color: transparent;
		}

		#templateFooter {
			width: 100%;
			height: 30px;
			background-color: #ECECEC;
		}

		#footer-container {
		  	width: 90%;
		  	margin: 0 5% 0 5%;
		  	padding-top: 10px;
		}

		#footer-container p {
			text-align: center;
			font-family: helvetica-light;
			font-size: 8px;
			font-weight: bold;
			color: #000000;
			margin: 0 auto;
		}

		span {
			color: #0B409E;
		}
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>

<body>

    <div class="templateContainer">
        <!-- BEGIN HEADER // -->
        <div id="templateHeader">

	    	<img src="https://www.logolynx.com/images/logolynx/ca/caec3ebc94200aabb4a2c31891100f28.png" style="width: 350px">
	                                
	    <div id="postheader">
	        <div id="postheader-container" class="center">
	           	<p>Lorem ipsum dolor sit amet.<br>Sed sagittis, lacus ut placerat rutrum, massa dui vulputate tortor.</p>
	        </div>
	    </div>
	</div>
    <!-- // END HEADER -->

    <!-- BEGIN BODY // -->
    <div id="templateBody">

    	<div id="topContent" class="center">
    		<img src="https://thehardtimes.net/wp-content/uploads/2017/09/mknkjnklj.jpg">
    	</div>

    	<div id="midContent">
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis, lacus ut placerat rutrum, massa dui vulputate tortor, eget interdum ex erat suscipit nibh. Nam quis lectus mattis, dictum tortor id, vestibulum quam. Morbi a ligula nibh. Etiam id diam erat. Duis elit diam, posuere a lectus et, commodo pulvinar diam.</p>
    	</div>

    	<div id="bottomContent">
    		<div id="bottom-container">
    			<button>This is a button</button>
    			<button>Another button</button>
    		</div>
    	</div>

	</div>
    <!-- // END BODY -->


    <!-- BEGIN FOOTER // -->
    <div id="templateFooter">
    	<div id="footer-container">
    		<p>Pulse <span>aqui</span> si desea dejar de recibir recordatorios de revisiones a traves de este canal</p>
		</div>
    <!-- // END FOOTER -->
    </div>

</body>
</html>

标签： htmlcss

解决方案

position:relative与z-index:10000for一起使用#midContent

  position:relative;
  z-index: 10000;


.templateContainer{
			max-width:450px !important;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
		}

		#templateHeader img {
			text-align: center;
			height: 150px;
			padding: 5px 0;
		}

		#templateHeader, #postheader {
			text-align: center;
		}

		#postheader {
			height: 75px;
			background-color: #EAEAEA;
		}

		#postheader-container {
		  	width: 90%;
		  	height: 100%;
		  	margin: 0 5%;
		}

		#postheader-container p {
			text-align: center;
			font-family: helvetica-light;
			font-size: 14px;
			color: #039FD6;
			margin: 0 auto;
			padding: 20px 0px;
		}

		#templateBody {
			height: 495px;
		}

		.center {
			display:flex;
			align-items:center;
			justify-content:center;
		}

		#topContent {
			height: 225px;
			width: 100%;
		}

		#topContent img {
			width: inherit;
		}

		#midContent {
			background-image: url("https://i.ibb.co/qsfyckt/Untitled-1.png");
			
      position:relative;
      z-index: 10000;
			background-size: cover;
			background-position: 100% 0%;
			width: 100%;
		}

		#midContent p {
			padding: 40px 25px 0px 25px;
			text-align: center;
			color: #ffffff;
			font-family: helvetica-light;
			font-size: 16px;
			margin: 0 auto;
		}

		#bottomContent {
			width: 100%;
			height: 125px;
			margin-top: 1%;
		}

		#bottom-container {
			height: auto;
		  	width: 70%;
		  	margin: 0% 15% 0% 15%;
		}

		#bottom-container button {
			width: 85%;
			padding: 10px;
			margin: 3% 7% 0 7%;
			font-family: helvetica-light;
			font-weight: bold; 
			font-size: 12px;
			color: #ffffff;
			background-color: #0B409E;
			text-transform: uppercase;
			border-radius: 8px;
			border-color: transparent;
		}

		#templateFooter {
			width: 100%;
			height: 30px;
			background-color: #ECECEC;
		}

		#footer-container {
		  	width: 90%;
		  	margin: 0 5% 0 5%;
		  	padding-top: 10px;
		}

		#footer-container p {
			text-align: center;
			font-family: helvetica-light;
			font-size: 8px;
			font-weight: bold;
			color: #000000;
			margin: 0 auto;
		}

		span {
			color: #0B409E;
		}
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>

<body>

    <div class="templateContainer">
        <!-- BEGIN HEADER // -->
        <div id="templateHeader">

	    	<img src="https://www.logolynx.com/images/logolynx/ca/caec3ebc94200aabb4a2c31891100f28.png" style="width: 350px">
	                                
	    <div id="postheader">
	        <div id="postheader-container" class="center">
	           	<p>Lorem ipsum dolor sit amet.<br>Sed sagittis, lacus ut placerat rutrum, massa dui vulputate tortor.</p>
	        </div>
	    </div>
	</div>
    <!-- // END HEADER -->

    <!-- BEGIN BODY // -->
    <div id="templateBody">

    	<div id="topContent" class="center">
    		<img src="https://thehardtimes.net/wp-content/uploads/2017/09/mknkjnklj.jpg">
    	</div>

    	<div id="midContent">
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis, lacus ut placerat rutrum, massa dui vulputate tortor, eget interdum ex erat suscipit nibh. Nam quis lectus mattis, dictum tortor id, vestibulum quam. Morbi a ligula nibh. Etiam id diam erat. Duis elit diam, posuere a lectus et, commodo pulvinar diam.</p>
    	</div>

    	<div id="bottomContent">
    		<div id="bottom-container">
    			<button>This is a button</button>
    			<button>Another button</button>
    		</div>
    	</div>

	</div>
    <!-- // END BODY -->


    <!-- BEGIN FOOTER // -->
    <div id="templateFooter">
    	<div id="footer-container">
    		<p>Pulse <span>aqui</span> si desea dejar de recibir recordatorios de revisiones a traves de este canal</p>
		</div>
    <!-- // END FOOTER -->
    </div>

</body>
</html>

推荐阅读