Div position Fixed below other Divs

Asked

Viewed 417 times

1

Hello

i would like to put a div Fixed on the right side of my div without it getting over the dolls.

as I go scrolling this div goes accompanying the scroll but only inside the black div! the dolls are created automatically based on the number of cases within the DB and would like the div Fixed not interfere with the dolls.

inserir a descrição da imagem aqui

#images {
    margin: 4px;
    margin-bottom: 6px;
    position: absolute;
    z-index: 2;
  }

#imagess {
    margin: 4px;
    margin-bottom: 6px;
    position: absolute;
    z-index: 1;
  }

.bordadocontador {
    color: white;
    font-size: 18px;
    border: 2px solid #ffff00;
    border-radius: 4px;
    padding: 7px 12px 7px 12px;
    position: fixed;
    z-index: 3;
    float: right;
   }
<div class="col-12 col-lg-3 direita">
    <h3> Numero de vítimas </h3>

    <div id="images"></div>
    <div id="imagess"></div>

    <div class="bordadocontador">
      <div id="contadordebonecos"></div>bla bla bla
    </div>

</div>

html css
  • 1

    In general, elements with position:fixed do not respect its parent element. It is guided by the window or document.

2 answers

2


You have to evaluate your situation there, but you can change the position:fixed for position:sticky, as this the element is fixed relative to the parent and accepts the float etc, and not relative to window as a whole...

Notice I put a black border on col-, because it is only the height of its own content, and when you do the scroll she may or may not leave the screen, so I said you have to study her case. However with the position:sticky you can come up with a solution.

inserir a descrição da imagem aqui

It would be nice if you took an hour to study the positions CSS, understanding how they work will help you a lot to build layouts. In your case these position:absolutes in my view are unnecessary and may end up more disturbing than helping, think about it https://developer.mozilla.org/en-US/docs/Web/CSS/position

Follow the image code above.

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<title>Page Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" media="screen"
		href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" media="screen"
		href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
	<style>
		html,
		body {
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			/* background-color: black; */
		}

		body {
			height: 150vh;
		}

		#images {
			margin: 4px;
			margin-bottom: 6px;
			position: absolute;
			z-index: 2;
		}

		#imagess {
			margin: 4px;
			margin-bottom: 6px;
			position: absolute;
			z-index: 1;
		}

		.bordadocontador {
			color: white;
			font-size: 18px;
			border: 2px solid #ffff00;
			border-radius: 4px;
			padding: 7px 12px 7px 12px;
			position: sticky;
			z-index: 3;
			float: right;
			top: 100px;
		}
		.teste {
			position: sticky;
			top: 100px;
			margin-top: 200px;
		}
		.direita {
			border: 1px solid #000;
		}
	</style>
</head>

<body>


<div class="row">
		<div class="col-12 col-lg-3 direita">
			<h3> Numero de vítimas </h3>
	
			<div id="images">
				<img src="https://placecage.com/51/100">
			</div>
			<div id="imagess">
				<img src="https://placecage.com/50/100">
			</div>
	
			<div class="bordadocontador">
				<div id="contadordebonecos"></div>bla bla bla
			</div>
	
			<div class="teste">123</div>
		</div>
</div>

	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>

</html>

1

You can use: position: Fixed; right: 0; top: 100px;

  • Only a hint, with right:0 and positin:Fixed the element will be pasted to the right of the browser window, and not pasted to the right of the element in which it is inside

  • Yes, with what I posted the element will get more static. In case the div of the dolls increase, they will be superimposed.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.