Problem bookstore when aligning div elements and applying z-index

Question

Problem bookstore when aligning div elements and applying z-index

Navigation

#1 by (3 votes)

3

I'm trying to make a bookcase using CSS the problem arises when aligning elements with display:inline-block does not work, the other elements appear vertically (I try to make them horizontal) and also the z-index I can not apply to the class .libro apparently the element is behind.

How could I align the elements horizontally?

How to apply z-index correctly?

.gabinete {
	width: 100%;
	height: 615px;
	margin: 0 auto;
	background-color: #45221c;
	top: 40px;
	left: 30%;
	border: 10px solid #69342b;
	box-sizing: border-box;
	box-shadow: 0px 2px 15px 0px #21100d;
}
.gabinete .base-arriba {
	width: 104%;
	height: 0;
	border-bottom: 10px solid #572b23;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	box-sizing: border-box;
	top: -20px;
	left: -2%;
	position: absolute;
}
.gabinete .divicion {
	position: relative;
	width: 100%;
	height: 33.5%;
	box-sizing: border-box;
}

.gabinete .divicion .atras {
	position: absolute;
	display:inline-block;        /*no funciona*/
	top: 0;
	left: 2%;
	width: 96%;
	height: 100%;
	background: #2c1512;
	box-shadow: inset 10px 15px 15px #21100d;
}
.gabinete .divicion .base {
	width: 100%;
	height: 0;
	border-bottom: 20px solid #331915;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	box-sizing: border-box;
	bottom: 10px;
	position: absolute;
}
.gabinete .divicion .frente {
	width: 100%;
	height: 10px;
	background-color: #69342b;
	position: absolute;
	bottom: 0;
}
.libro{
	width: 25%;
	height: 80%;
	margin: 2px;
	background-color: yellow;
	z-index: 100;                /*no funciona*/
	box-shadow: 0px 2px 15px 0px #21100d;
}

<div class="gabinete">
	<div class="base-arriba"></div>

	<div class="divicion">
		<div class="triangulo-der"></div>
		<div class="triangulo-izq"></div>
		<div class="atras">
      <!-- aqui agrego los libros -->
			<div class="libro">libro</div>
			<div class="libro">libro</div>
			<div class="libro">libro</div>
			<div class="libro">libro</div>
		</div>
		<div class="base"></div>
		<div class="frente"></div>
	</div>
	<div class="divicion">
		<div class="triangulo-der"></div>
		<div class="triangulo-izq"></div>
		<div class="atras">
		</div>
		<div class="base"></div>
		<div class="frente"></div>		
	</div>
	<div class="divicion">
		<div class="triangulo-der"></div>
		<div class="triangulo-izq"></div>
		<div class="atras">
		</div>
		<div class="base"></div>
		<div class="frente"></div>
	</div>
</div>

html css

asked by iuninefrendor 08.01.2018 в 00:47

source

1 answer

Browse JSON Array in PHP [duplicated] How can I put a variable of the same class as the class I am defining?

score 3 · Accepted Answer

The z-index property only affects elements that have been positioned (that have absolute, relative or fixed position). Since you have not specified any position for the .libro , it will not affect you and will be behind the other bookshelf shelves.

So, to make them look good, in addition to adding display:inline-block (to align them horizontally) you should also put a position:relative (so that you apply z-index ):

.gabinete {
	width: 100%;
	height: 615px;
	margin: 0 auto;
	background-color: #45221c;
	top: 40px;
	left: 30%;
	border: 10px solid #69342b;
	box-sizing: border-box;
	box-shadow: 0px 2px 15px 0px #21100d;
}
.gabinete .base-arriba {
	width: 104%;
	height: 0;
	border-bottom: 10px solid #572b23;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	box-sizing: border-box;
	top: -20px;
	left: -2%;
	position: absolute;
}
.gabinete .divicion {
	position: relative;
	width: 100%;
	height: 33.5%;
	box-sizing: border-box;
}

.gabinete .divicion .atras {
	position: absolute;
	display:inline-block;        /*no funciona*/
	top: 0;
	left: 2%;
	width: 96%;
	height: 100%;
	background: #2c1512;
	box-shadow: inset 10px 15px 15px #21100d;
}
.gabinete .divicion .base {
	width: 100%;
	height: 0;
	border-bottom: 20px solid #331915;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	box-sizing: border-box;
	bottom: 10px;
	position: absolute;
}
.gabinete .divicion .frente {
	width: 100%;
	height: 10px;
	background-color: #69342b;
	position: absolute;
	bottom: 0;
}
.libro{
	width: 25%;
	height: 80%;
	margin: 2px;
	background-color: yellow;
	z-index: 100;                /*no funciona*/
	box-shadow: 0px 2px 15px 0px #21100d;
  position: relative;
  display: inline-block;
}

<div class="gabinete">
	<div class="base-arriba"></div>

	<div class="divicion">
		<div class="triangulo-der"></div>
		<div class="triangulo-izq"></div>
		<div class="atras">
      <!-- aqui agrego los libros -->
			<div class="libro">libro</div>
			<div class="libro">libro</div>
			<div class="libro">libro</div>
			<div class="libro">libro</div>
		</div>
		<div class="base"></div>
		<div class="frente"></div>
	</div>
	<div class="divicion">
		<div class="triangulo-der"></div>
		<div class="triangulo-izq"></div>
		<div class="atras">
		</div>
		<div class="base"></div>
		<div class="frente"></div>		
	</div>
	<div class="divicion">
		<div class="triangulo-der"></div>
		<div class="triangulo-izq"></div>
		<div class="atras">
		</div>
		<div class="base"></div>
		<div class="frente"></div>
	</div>
</div>