0

Estou com uma duvida e gostaria da ajuda de voces, ja pesquisei muito e nao encontrei uma solucao.

Estou tentando posicionar uma Div sobre uma outra Div. Encontrei algumas maneiras de fazer isso na internet, porem, nao gostei muito do resultado e gostaria de saber se noa existe uma outra alternativa.

Uma das formas que eu encontrei foi colocar o position como absolute e setando o top igual a zero na segunda Div. Desse jeito, a segunda Div fica por cima da primeira Div, porem, acaba "escapando / vazando" do lado direito, nao respeitando a primeira Div.

inserir a descrição da imagem aqui

Segue exemplo de codigo:

(migrado do JSFiddle)

body{
	width: 100%;
	height: 100vh;
	font-family: "Montserrat", "Helvetica", arial, sans-serif;
    font-weight: 600;
    text-align: center;
}
.container {
	max-width: 100%;
	height: 100vh;
	/*overflow:hidden;*/
}
.container-fluid {
	padding: 0;
}
.primeiro {
	max-width: 100%;
	height: 100vh;
	color: red;
}
.segundo {
	max-width: 100%;
	height: 100vh;
	color: blue;
	position: absolute;
	top: 0;
}
.terceiro {
	max-width: 100%;
	height: 100vh;
	color: orange;
	position: absolute;
	top: 0;
}
<!DOCTYPE html>
<html lang="pt-br">
  <head>    
    <title>Matheus Leandro</title>
    <!-- Meta tags Obrigatórias -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
	<!-- CSS -->
    <link rel="stylesheet" href="css/style.css">

	<!--[if lt IE 9]>
	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

  </head>
  <body>

    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="container-fluid">
                    <div class="primeiro">
                        <h1>T 1 esteee T 1 esteee T 1 esteee T 1 esteee</h1>
                    </div>
                    <div class="segundo">
                        <h1>T 2 esteee T 2fadfasdfasfasfdfsasff esteee T 2 esteee T 2 esteee</h1>
                    </div>
                    <div class="terceiro">
                        <h1>T 3 esteee T 3 esteefafadfadfafasfse T 3 esteee T 3 esteee</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript (Opcional) -->
    <!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

Obs.: a primeira Div (que deveria ser respeitada) esta com as letras vermelhas, se voces observarem, a segunda Div (azul) e a terceira Div (laranja) estao maiores (lado direito principalmente) do que a primeira.

1 Resposta 1

0

As suas div são elementos irmãos e não delimita a largura baseando um ao outro. A não ser que você defina uma largura estática para todos e posicione-os igualmente.

Quando você aplicou o position: absolute sem o elemento pai estar com position: relative, os elementos passaram a seguir o fluxo da página, ao invés do elemento pai.

Uma alternativa é o elemento pai ter a position: relative enquanto os filhos ficam com position: absolute. Tal forma que você vai utilizar o tamanho do elemento pai para delimitar a largura dos filhos. Isso quer dizer que os filhos estarão relativos ao pai.

Exemplo prático:

body {
    margin: 0;
}
div.pai {
    position: relative;
    width: 500px;
    height: 100vh;
    background-color: rgb(220, 220, 220);
}
div.filhos {
    position: absolute;
    top: 0;
    width: 100%;
}
div.filhos:nth-child(1) {
    background-color: rgba(255, 255, 180, 0.5);
}
div.filhos:nth-child(2) {
    background-color: rgba(255, 180, 255, 0.5);
    margin: 10px;
}
div.filhos:nth-child(3) {
    background-color: rgba(180, 255, 255, 0.5);
    margin: 20px;
}
<div class="pai">
    <div class="filhos">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos tempora, maxime tenetur corporis deserunt ullam odio error cupiditate excepturi labore magnam autem ipsum blanditiis consequatur amet dolorum. Atque, soluta, modi.</div>
    <div class="filhos">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia blanditiis cumque nihil fuga, sit porro hic recusandae nobis non assumenda deleniti dolores ut possimus error cupiditate obcaecati, laudantium quis quam.</div>
    <div class="filhos">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum fugit nesciunt velit error, voluptatem, adipisci molestiae sed rerum reprehenderit provident qui. Aliquam officiis nostrum sapiente harum rem, commodi voluptate non!</div>
</div>

Obs.: coloquei uma margem nos dois últimos elementos a fim de deslocá-los para melhor visualização.


Aplicado ao seu código:

body{
    width: 100%;
    height: 100vh;
    font-family: "Montserrat", "Helvetica", arial, sans-serif;
    font-weight: 600;
    text-align: center;
}
.container {
    max-width: 100%;
    height: 100vh;
    /*overflow:hidden;*/
}
.container-fluid {
    padding: 0;
}
.pai {
    position: relative;
}
.primeiro {
    max-width: 100%;
    height: 100vh;
    color: red;
    position: absolute;
    top: 0;
}
.segundo {
    max-width: 100%;
    height: 100vh;
    color: blue;
    position: absolute;
    top: 0;
}
.terceiro {
    max-width: 100%;
    height: 100vh;
    color: orange;
    position: absolute;
    top: 0;
}
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <div class="container-fluid pai">
                <div class="primeiro">
                    <h1>T 1 esteee T 1 esteee T 1 esteee T 1 esteee</h1>
                </div>
                <div class="segundo">
                    <h1>T 2 esteee T 2fadfasdfasfasfdfsasff esteee T 2 esteee T 2 esteee</h1>
                </div>
                <div class="terceiro">
                    <h1>T 3 esteee T 3 esteefafadfadfafasfse T 3 esteee T 3 esteee</h1>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- JavaScript (Opcional) -->
<!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .