2

Porque el div con clase iconmas me ocupa en altura 100% sin decirselo,solo le indico padding 0 0.5%

.padre
{
position:relative
}

.ttcategoriax
{
	position: relative;
	width: 100%;
}
.ttcategoriax p
{
	position: relative;
	font-size: 20px;
	background-color: aqua;
	padding: 3%;
	width: 100%;
	display: block
}

.iconmas
{
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 15%;
  background-color: rgba(0,0,0,1.00);
	padding:0 0.5%
}
<div class="padre">
	<div class="ttcategoriax"><p>Electronica</p></div>
  <div class="iconmas"></div>
</div>

3
  • Por naturaleza los div intentan ocupar el máximo contenido de la etiqueta padre. Commented el 5 mar. 2018 a las 22:59
  • eso no es en el width? Commented el 5 mar. 2018 a las 23:00
  • Aunque esto es cierto (normalmente), es falso en este caso, pues si revisas el código, tiene posicionamiento absoluto dentro de un contenedor con posicionamiento relativo.
    – Shaz
    Commented el 5 mar. 2018 a las 23:38

1 respuesta 1

2

Está ocupando el 100% del alto porque tiene posición absoluta y le estás diciendo que su posición de arriba top es en 0, y lo mismo abajo bottom, por lo cual el elemento "intenta" cumplir estas dos instrucciones y su borde superior está en lo más alto del contenedor referencia (el cual tiene posición relativa) y su borde inferior en lo más bajo.

Si le quito bottom: 0;, entonces ya no ocupa el 100%, para mostrarte que esa es la razón principal.

.padre {
  position:relative;
  background-color: yellow;
}

.ttcategoriax
{
	position: relative;
	width: 100%;
}
.ttcategoriax p
{
	position: relative;
	font-size: 20px;
	background-color: aqua;
	padding: 3%;
	width: 100%;
	display: block
}

.iconmas {
  position: absolute;
  right: 0;
  top: 0;
	margin: auto;
	width: 15%;
  background-color: rgba(0,0,0,1.00);
	padding:0 0.5%;
  color: white;
}
<div class="padre">
	<div class="ttcategoriax"><p>Electronica</p></div>
  <div class="iconmas">holaaa</div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.