How to avoid lines overlapping?

Question

Why do i get overlapping lines when trying to use Reveal.js?

The default value is

.reveal .slides>section>section {
display: none;
position: absolute;
width: 100%;
padding: 20px 0px;

z-index: 10;
line-height: 1.2em; /* the default value
font-weight: normal;

here is the result (cant upload iti here, imghur bug)

http://s24.postimg.org/5rawfbigl/image.jpg

but sadly, i got all the contents get mixed! so i changed the 1.2 to something greater like 2 or 3 to get a normal displaying.

What i did wrong?

Answer 1

position absolute doesn't care if there is another element on the targeted area. Try changig to

position: relative;