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

Div sits on top of another Div

  • 772

Right now I have 2 divwith different IDones, one is called image with a redcolor background and another is called logo with a blue background .color

I need the blue one not to overlap on top of divthe red one when it has a height of 390px, is there a way to do it without using any ... I know it's because of the , but how can we modify the structure so that this doesn't happen ...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: I need them to divkeep the current position, ie the Blue div should be at the bottom centered and the Red div should stay centered

html

3 Answers

  1. Best Answer

    You can use flexwith justify-content: space-betweenand flex-direction:column.

    In your code it would look like this:

    .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. You can change the position: absolute;a position: static;in the div id="content-logo"like this:

    .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. change the styles of content-logo, add position: fixed;only .

    I put 100% on #logoso that it occupies the entire screen

    .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