Home / Questions / 290801
Accepted
zerokira
Asked: 2020-09-06 12:42:38 +0800 CST 2020-09-06 12:42:38 +0800 CST

Div 位于另一个 Div 之上

  • 772

现在我有 2 个div不同ID的，一个称为带有红色背景的图像，另一个称为带有蓝色背景的徽标。colorcolor

当它的高度为 390px 时，我需要蓝色的不要重叠在红色的顶部div，有没有办法在不使用任何东西的情况下做到这一点......我知道这是因为，但是我们如何修改结构这不会发生...color div@media (min-width: 675px)posicion Absolute

.content {
			height: 60%; 
			margin-top: auto; 
			position: relative;
		}

		#image {
			width: 350px;
			height: 112px; 
			background-color: red;
		}

		#content-logo {
			position: absolute;
			bottom: 0; 
			text-align: center; 
			padding-bottom: 20px; 
			width: 100%;
		}

		#logo {
			width: 140px;
			height: 110px;
			background-color: blue;
			display: inline-block;
		}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="d-flex">
		<div class="content-login vh-100 d-flex justify-content-center align-items-center" style="width: 60%;">
			<div class="content">
				<div id="image">
					IMAGE
				</div>
				<div id="content-logo">
					<div id="logo">LOGO</div>
				</div>
			</div>
		</div>
		<div style="width: 40%;">
			<div class="align-items-center justify-content-center d-flex h-100">
				<h1>HOLA</h1>
			</div>
		</div>
	</div>

PS：我需要它们div保持当前位置，即蓝色 div 应该在底部居中，红色 div 应该保持居中

html

3 Answers

  1. Best Answer

    您可以flex使用justify-content: space-between和flex-direction:column。

    在您的代码中，它看起来像这样：

    .content {
  display:flex;
  height: 60%; 
  margin-top: auto; 
  position: relative;
  justify-content: space-between;
  flex-direction:column;
}

#image {
  width: 350px;
  min-height: 112px; 
  background-color: red;
}

#content-logo {

  bottom: 0; 
  text-align: center; 
  padding-bottom: 20px; 
  width: 100%;
}

#logo {
  width: 140px;
  height: 110px;
  background-color: blue;
  display: inline-block;
}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="d-flex">
  <div class="content-login vh-100 d-flex justify-content-center align-items-center" style="width: 60%;">
    <div class="content">
      <div id="image">
        IMAGE
      </div>
      <div id="content-logo">
        <div id="logo">LOGO</div>
      </div>
    </div>
  </div>
  <div style="width: 40%;">
    <div class="align-items-center justify-content-center d-flex h-100">
      <h1>HOLA</h1>
    </div>
  </div>
</div>

    • 4

  2. 您可以像这样更改position: absolute;a ：position: static;div id="content-logo"

    .content {
			height: 60%; 
			margin-top: auto; 
			position: relative;
		}

		#image {
			width: 350px;
			height: 112px; 
			background-color: red;
		}

		#content-logo {
			position: static;
			bottom: 0; 
			text-align: center; 
			padding-bottom: 20px; 
			width: 100%;
		}

		#logo {
			width: 140px;
			height: 110px;
			background-color: blue;
			display: inline-block;
		}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="d-flex">
		<div class="content-login vh-100 d-flex justify-content-center align-items-center" style="width: 60%;">
			<div class="content">
				<div id="image">
					IMAGE
				</div>
				<div id="content-logo">
					<div id="logo">LOGO</div>
				</div>
			</div>
		</div>
		<div style="width: 40%;">
			<div class="align-items-center justify-content-center d-flex h-100">
				<h1>HOLA</h1>
			</div>
		</div>
	</div>

    • 0

  3. 更改样式content-logo，仅添加 position: fixed;.

    我把100%打开#logo，让它占据整个屏幕

    .content {
			height: 60%; 
			margin-top: auto; 
			position: relative;
		}

		#image {
			width: 550px;
			height: 560px; 
			background-color: red;
		}

		#content-logo {
			bottom: 0; 
			text-align: center; 
			padding-bottom: 0px; 
			width: 100%;
      position: fixed;
      right: 0;
      left: 0;
      /*z-index: 1030;*/
      width:100%;
		}

		#logo {
			width: 100%;
			height: 110px;
			background-color: blue;
			display: inline-block;
		}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="d-flex">
		<div class="content-login vh-100 d-flex justify-content-center align-items-center" style="width: 60%;">
			<div class="content">
				<div id="image">
					IMAGE
				</div>
				<div id="content-logo">
					<div id="logo">LOGO</div>
				</div>
			</div>
		</div>
		<div style="width: 40%;">
			<div class="align-items-center justify-content-center d-flex h-100">
				<h1>HOLA</h1>
			</div>
		</div>
	</div>

    • 0