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. el 5 mar. 2018 a las 22:59
  • eso no es en el width? 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
    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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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