Question

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

我有一个要在插画家中创建的图像，该图像用作midContent的背景。我希望此background image的浅蓝色部分与上面的图像重叠。我尝试使用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>

Answer 1

将position:relative与z-index:10000一起使用#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>

flexbox列中的div重叠

1 个答案: