Display List Items On Top Of Each Other
I'm aiming to move through list items, fading one out as the other fades in. I need all three of these list items to display on the same line, on top of each other. Should work wi
Solution 1:
I hope I understand your question: Simply using position property value of absolute, will stack them on each other. Try this:
* {
margin: 0 auto;
}
.container {
width: 300px;
position: relative;
margin-top: 70px;
}
ul {
list-style-type:none;
}
ul li {
position: absolute;
height: 25px;
background-color: red;
color: white;
padding: 10px;
display: block;
text-align: center;
width: 100%;
}
<div class="container">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
Note: You can use z-index to alter the order of the stack of the element.
Post a Comment for "Display List Items On Top Of Each Other"