绝对定位李重叠文字

Question

So I have a strange problem here, where my text animation requires the li element to be positioned absolute. This is causing it to flow out of the document flow and I am unable to align the text properly underneath the li without adding padding. I want to display the i element directly underneath the ul. I've made a small example of the code https://jsfiddle.net/m479w3sj/

<div id="head">
    <ul>
        <li>Text 1</li>
        <li>Text 2</li>
        <li>Text 3</li>
        <li><span style="color: #00a9ac">Text 4</span></li>
    </ul>

    <a class="arrow" href="#main"><i class="fa fa-arrow-down"></i></a>
</div>

CSS

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

#head ul {
    list-style-type: none;
}

#head ul li {
    position: absolute;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    transition: opacity .5s ease-in;
    font-size: 50px;
    font-weight: bold;
    color: #E3E3E3;
}

#head li + li {
    opacity: 0;
}

JS

var current = 0,
    slides = document.querySelectorAll("#head ul li");

setInterval(function() {
    for (var i = 0; i < slides.length; i++) {
        slides[i].style.opacity = 0;
    }
    current = (current != slides.length -1) ? current + 1 : 0;
    slides[current].style.opacity = 1;
}, 2000);

Answer 1

I believe this is due to the default css of the ul tag.

https://www.w3schools.com/cssref/css_default_values.asp

By setting the padding to zero in the * selector, you are able to place the ul in the center of the page.

Hope this is what you were looking for!