Why is it not placed in front of the image when positioning with absolute position the text and position relative to the image? [duplicate]

Question

Why is it not placed in front of the image when positioning with absolute position the text and position relative to the image? [duplicate]

Navigation

#1 by (1 votes)

0

when you put position absolute to the background image and position relative to the front text does not work the text is not positioned in front of the image:

.imagen-fondo1{
	position: relative;
}
.imagen-fondo2{
	position: relative;
}

.texto-denlante1{
	position: absolute;
	text-align: center;
	bottom: 50px;
}
.texto-denlante2{
	position: absolute;
	text-align: center;
	bottom: 50px;
}

body {
    font-family: 'PT Sans', sans-serif;
    font-size: 14px;
    line-height: 1.8em;
    font-weight: 400;
    background: #ffffff;
}
*{
	box-sizing: border-box;
}
.wrapper{
	width: 1349px;
	margin: 0 auto;
}
/*barra arriba*/
.barra-arriba{
	background-color: #000000;
}
.barra-izquierda{
	float: left;
	margin-left: 20px;
	padding-top: 10px;
}
.barra-izquierda ul li{
	display: inline-block;
	vertical-align: top;
}
.barra-izquierda ul li a{
	text-decoration: none;
	color: #ffff;
	margin-right: 15px;

}
.barra-derecha{
	float: right;
	padding-top: 10px;
    padding-bottom: 10px;
}
.barra-derecha a{
	float: right;
	color: #ffff;
	text-decoration: none;
	margin-right: 15px;
}

.fa-user{
    font-size: 12px;
    color: #2dcc70;
    margin-right: 6px;
	}
.fa-lock{
    font-size: 12px;
    color: #2dcc70;
    margin-right: 6px;
	}
.fa-shopping-cart{
    font-size: 16px;
    color: #2dcc70;
    margin-right: 6px;
	}

/*Header*/
.header{
	background-color:#2dcc70;
	padding-top: 40px;
    padding-bottom: 116px;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    color: #ffff;
    width: 1349px;
}
.wraper-header{
	background-color: transparent;
    width: 1250px;
    margin: 0 auto;
}
.header h2{
	margin-top: 103px;
    font-size: 40px;
    line-height: 53px;
}
.izquierda{
	float: left;
	display: inline-block;
	margin-bottom: 15px;
	font-size: 25px;
    line-height: 23px;
    font-weight: 700;
}
.derecha{
	float: right;
	font-weight:700;
	font-size: 14px;
	margin-top: 12px;
}
.derecha li a{
	text-decoration: none;
	color: #fff;
}
.derecha li a:hover{
	color: black;
}
.derecha li {
	display: inline-block;
	vertical-align: top;
	margin-right: 15px;
}
.texto-centro{
	font-weight: 400;
	margin-bottom: 40px;
}
.search-form_submit{
	padding-top: 13px;
	padding-bottom: 14px;
	padding-right: 19px;
	padding-left: 19px;
	color: #ffff;
    background-color:#333333FF;
    border: none;
    cursor: pointer;
}
.search-form_submit:hover{
	color:#2dcc70;
	background-color: #4d4d4d;
}

.search-form-label{
	padding: 11px 40px 11px 10px;
    background: #fff;
}
.search-form-input{
	padding: 11px 40px 11px 10px;
    background: #fff;
    border: none;
}
.fa-search{
	color: #C2C2C2FF;
	font-size: 12px;
	margin-right: 10px;
}
.parrafo1{
	margin-top: 42px;
}
.limpiador{
	clear: both;
}
/*paisaje*/
.paisaje{
	width: 1250px;
	margin:0 auto;
	padding-top: 50px;
	padding-bottom: 31px;
}
.primera-parte{
	display: inline-block;
	vertical-align: top;
	width: 436px;
	margin-right: 159px;
}
.segunda-parte{
  display: inline-block;
  vertical-align: top;
  width: 436px;
  margin-right: 10px;
}
.imagen-fondo1{
	position: relative;
}
.imagen-fondo2{
	position: relative;
}

.texto-denlante1{
	position: absolute;
	text-align: center;
	bottom: 50px;
}
.texto-delante1 a{
    padding: 14px 19px;
    color: #fff;
    background-color: #2dcc70;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
}
.texto-denlante2{
	position: absolute;
	text-align: center;	
}
.texto-delante2 a{
    padding: 14px 19px;
    color: #fff;
    font-size: 14px;
    background-color: #2dcc70;
    text-decoration: none;
    font-weight: 700;

}
.texto-delante2 a:hover{
    background-color: ;
}
.parte1,.parte2,.parte3,.parte4{
  display: inline-block;
  vertical-align: top;
  width: 28%;
  margin-right: -50px;
  }
 .parte1 a,.parte2 a,.parte3 a,.parte4 a{
     color: #2dcc70
 } 
 .parte1 a:hover,.parte2 a:hover,.parte3 a:hover,.parte4 a:hover{
     color: #6D8E7BFF;
 } 
  .listas{
  	width: 1349px;
  	margin: 0 auto;
}
.wrapper-listas{
	width: 1250px;
	margin: 0 auto;
}
.wrapper-listas h4{
	font-size: 25px;
    line-height: 53px;
    text-align: center;
}
.wrapper-listas .lista1{
	    width: 270px;
}
.lista1 ul li{
	    display: inline-block;
	    vertical-align: top;
}
 .lista ul li a{
    font-size: 15px;
    line-height: 33px;
    color: #2dcc70;
    text-decoration: none;
}
 
.pie-de-pagina{
	background-color: #333333;
	color: #878787FF;
	padding-top: 42px;
    padding-bottom: 20px;
    width: 1349px;
    margin: 0 auto;
	}
.wrapper-footer{
	background-color: transparent;
	color: #878787FF;
    width: 1250px;
    margin: 0 auto;
	}
.pie-de-pagina h4{
	font-size: 25px;
    line-height: 53px;
    color: #ffff;
    margin-bottom: 10px;
	}
.footer1,.footer2,.footer3,.footer4{
	display: inline-block;
	vertical-align: top;
	margin-right: 30px;
	}

.imagen-izquierdo1,.imagen-izquierdo2,.imagen-izquierdo3{
  float: left;
}
.contenido-derecho1,.contenido-derecho2,.contenido-derecho3{
  float: right;
  margin-left: 10px;
}

.tiempo1,.tiempo2,.tiempo3{
  color:#2dcc70;
  margin-bottom: 8px;
}

<!DOCTYPE html>
<html>
<head>
    
		<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet">
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">
		<link rel="stylesheet" type="text/css" href="css/reset.css">
        <link rel="stylesheet" type="text/css" href="css/estilo.css">
	</title>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/es_LA/sdk.js#xfbml=1&version=v2.12';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="wrapper">
<div class="barra-arriba">
	<nav class="barra-izquierda">
		<ul>
			<li><a href="">Home</a></li>
			<li><a href="">About</a></li>
			<li><a href="">Services</a></li>
			<li><a href="">News</a></li>
			<li><a href="">Contacts</a></li>
		</ul>
	</nav>
	<div class="barra-derecha">
		<a href=""><i class="fas fa-shopping-cart"></i></a>
		<a href=""><i class="fas fa-user"></i>Creata an Account</a>
		<a href=""><i class="fas fa-lock"></i>Login</a>
	</div>
	<div class="limpiador"></div>
</div>	
<header class="header">
	<div class="wraper-header">
	<div class="izquierda">
		<h1><img src="imagenes/logo.png">image bank</h1>
	</div>
	<ul class="derecha">
		<li><a href="">CREATIVE</a></li>
		<li><a href="">EDITORIAL</a></li>
		<li><a href="">VIDEO</a></li>
		<li><a href="">MUSIC</a></li>
	</ul>
<div class="limpiador"></div>
<h2 class="texto-centro">Photoblog with premium collection of<br>
photos, vectors and videos</h2>
<form class="formulario-busqueda"  method="get" accept-charset="utf-8">
	<label class="search-form-label">
		<i class="fas fa-search"></i><input class="search-form-input" type="text" name="s" autocomplete="off" placeholder="Search for photos, vectors and videos">
	</label>
	<button class="search-form_submit" type="submit">SEARCH</button>
</form>
<p class="parrafo1">Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
</div>
</header>
<section class="paisaje">
	<div class="primera-parte">
	   	<img class="imagen-fondo1" src="imagenes/imagen1.jpg">
	  <div class="texto-delante1">
	  	<h3>Creative images</h3>
	  	<p>
          Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </p>
              <a class="boton1" href="">SEE ALL CATEGORIES</a>
	  </div>	
	</div>
	<div class="segunda-parte">
	   	<img class="imagen-fondo2" src="imagenes/imagen2.jpg">
	  <div class="texto-delante2">
	  	<h3>Top photos</h3>
	  	<p>
          Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <a class="boton2" href="">SEE ALL CATEGORIES</a>
	  </div>
	  <div class="limpiador"></div>
	</div>
<div class="galeria">
	<div class="parte1">
		<div class="imagen1">
			<img src="imagenes/imagen3.jpg">
		</div>
		<h3>Stock Photos</h3>
		<p>Lorem ipsum dolor sit amet conse ctetur<br>adipisicing elit, sed do eiusmod tempo.</p>
		<a class="boton3" href="">SEE ALL CATEGORIES</a>
	</div>
	<div class="parte2">
		<div class="imagen2">
			<img src="imagenes/imagen4.jpg">
		</div>
		<h3>Vector Art</h3>
		<p>Lorem ipsum dolor sit amet conse ctetur<br>adipisicing elit, sed do eiusmod tempo.</p>
		<a class="boton4" href="">SEE ALL CATEGORIES</a>
	</div>
	<div class="parte3">
		<div class="imagen3">
			<img src="imagenes/imagen5.jpg">
		</div>
		<h3>HD Movies</h3>
		<p>Lorem ipsum dolor sit amet conse ctetur<br>adipisicing elit, sed do eiusmod tempo.</p>
		<a class="boton5" href="">SEE ALL CATEGORIES</a>
	</div>
	<div class="parte4">
		<div class="imagen4">
			<img src="imagenes/imagen6.jpg">
		</div>
		<h3>Editorial images</h3>
		<p>Lorem ipsum dolor sit amet conse ctetur<br>adipisicing elit, sed do eiusmod tempo.</p>
		<a class="boton6" href="">SEE ALL CATEGORIES</a>
	</div>
</div>
</section>
   <section class="listas">
   	<div class="wrapper-listas">
   	<h4>Browse top image categories</h4>
    <div class="lista">
	<ul>
		<li><a href="">Abstract</a></li>
		<li><a href="">Art Objects</a></li>
		<li><a href="">Architecture</a></li>
		<li><a href="">Business and Finance</a></li>
		<li><a href="">Cities</a></li>
		<li><a href="">Scenery</a></li>
	</ul>
   </div>
   <div class="lista">
    <ul>
		<li><a href="">Jewelry</a></li>
		<li><a href="">Food and Drink</a></li>
		<li><a href="">Animals</a></li>
		<li><a href="">Signs and Symbols</a></li>
		<li><a href="">Celebrities</a></li>
		<li><a href="">Illustrations</a></li>
	</ul>
</div>
   <div class="lista">
	<ul>
		<li><a href="">Tools</a></li>
		<li><a href="">Interiors</a></li>
		<li><a href="">Concepts</a></li>
		<li><a href="">Beauty & Fashion</a></li>
		<li><a href="">People</a></li>
		<li><a href="">Medicine</a></li>
	</ul>
</div>
<div class="lista">
	<ul>
		<li><a href="">Science</a></li>
		<li><a href="">Education</a></li>
		<li><a href="">Objects</a></li>
		<li><a href="">Purchase</a></li>
		<li><a href="">Holidays and Events</a></li>
		<li><a href="">Nature</a></li>
	</ul>
  </div>
	<a class="boton7" href="">SEE ALL CATEGORIES</a>
</div>
   </section>
   <footer class="pie-de-pagina">
   	<div class="wrapper-footer">
   <div class="footer1">
   	<h4>About</h4>
   	<p>Lorem ipsum dolor sit amet conse ctetur<br>adipisicing elit, sed do eiusmod tempor<br>incididunt ut labore et dolore magna aliqua. Ut<br>enim ad minim veniam, quis nostrud ullamco<br>laboris nisi ut aliquip ex ea commodo<br>consequat. Duis aute irure dolor in reprehenderi.</p>
   	<p>Dolor sit amet conse ctetur adipisicing elit, sed<br>do eiusmod tempor incididunt ut labore et <br>dolore magna aliqua. Ut enim ad minim veniam,<br> quis nostrud exercitation ullamco laboris nisi ut<br>aliquip ex ea commodo consequat. Duis aute<br>irure dolor in reprehenderi.</p>
   </div>
   <div class="footer2">

   	<h4>Latest News</h4>
   	<img class="imagen-izquierdo1" src="imagenes/footer1.jpg">
   	<div class="contenido-derecho1">
   	<time class="tiempo1" datetime="2018-01-22" pubdate>2018-01-22</time>
   	<p><a href="">Lorem ipsum dolor sit amet<br>conse ctetur adipisic</a></p>
   </div>
   <div class="limpiador"></div>

    <img class="imagen-izquierdo2" src="imagenes/footer2.jpg">
   <div class="contenido-derecho2">
   	<time class="tiempo2" datetime="2018-01-22" pubdate>2018-01-22</time>
   	<p><a href="">Lorem ipsum dolor sit amet<br>conse ctetur adipisic</a></p>
   </div>
   <div class="limpiador"></div>

   	<img class="imagen-izquierdo3" src="imagenes/footer3.jpg">
   <div class="contenido-derecho3">
   	<time class="tiempo3" datetime="2018-01-22" pubdate>2018-01-22</time>
   	<p><a href="">Lorem ipsum dolor sit amet<br>conse ctetur adipisic</a></p>
   </div>
   <div class="limpiador"></div>
   </div>	

   <div class="footer3">
   	<h4>Latest News</h4>
   	<h5>Lorem ipsum dolor sit amet cons</h5>
   	<p>Lorem ipsum dolor sit amet conse ctetur<br>adipisicing elit, sed do eiusmod tempor<br>incididunt ut labore et dolore magna aliqua.</p>

   	<h5>Lorem ipsum dolor sit amet cons</h5>
   	<p>Lorem ipsum dolor sit amet conse ctetur<br>adipisicing elit, sed do eiusmod tempor<br>incididunt ut labore et dolore magna aliqua.</p>
   </div>	
   <div class="footer4">
   	<h4>Facebook</h4>
    	<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FTemplateMonster%2F&tabs=timeline&width=270px&height=230px&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="270px" height="230px" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
   </div>
   </div>
   </footer>
</div>
</body>
</html>

html5 html css3 css

asked by Marco Oyola Yacolca 27.03.2018 в 20:20

source

1 answer

Assign an option element of a select the overflow-x rule Add Unit of Measure To Register In TextBox

score 1 · Answer 1

I have attached an example in which a background image and the text are placed on top. I hope it serves as an orientation.

In general, the absolute causes an element to 'disengage' from the normal flow of the document and to position itself in relation to the first ascendant that has a relative or absolute position.

Salu2

body {
  background-color: #a3d5d3;
}
#content{
  position:relative;
  max-width:1125px;
  height:auto;
}
img.debajo{
  display:block;
  position:absolute;
  z-indez:1;
  width:100%;
  height:auto;
}
div.texto{
  position:relative;
  z-indez:2;
  top:100px;
  width:100%;
  text-align:center;
  color:#fff;
  font-size:30px;
}

<div id="content">
  <img class="debajo" src="//images.pexels.com/photos/797643/pexels-photo-797643.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"/>
  <div class="texto">Texto encima</div>  
</div>