Simulate select box with CSS only - html

Question

Based on some code I found, I was able to make a kind of select menu with CSS only.
But now I have a problem with overlaying divs. It means, all divs below that "select menu" are moving down on hover or click that menu.
I've tried to play with z-index and positioning without success. I believe its quite simple but I'm seeing this code for many hours that I'm going crazy.
body {
width: 100%;
min-height: 500px;
margin: 3em auto;
font-family: 'Roboto', sans-serif;
letter-spacing: 1px;
}
h1 {
text-align: center;
color: #fff;
font-weight: 300;
font-size: 50px;
font-family: ProximaNovaSoftW03-Semibold;
letter-spacing: 0px;
text-shadow: 1px 1px rgba(0, 0, 0, 0.02), 2px 2px rgba(0, 0, 0, 0.02), 3px 3px rgba(0, 0, 0, 0.02), 4px 4px rgba(0, 0, 0, 0.02), 5px 5px rgba(0, 0, 0, 0.02), 6px 6px rgba(0, 0, 0, 0.02), 7px 7px rgba(0, 0, 0, 0.02);
}
h1 i {
position: relative;
font-size: 70px;
}
p {
text-align: center;
color: #000;
font-size: 14px;
margin-bottom: 2em;
line-height: 30px;
}
p img {
position: relative;
top: 8px;
right: 10px;
}
.paragrafo {
width: 100%;
background-color: #e1e1e1;
position: fixed;
}
.reserve-select {
position: relative;
overflow: hidden;
display: block;
margin: auto;
width: 330px;
height: 100%;
border-bottom: 0px;
border-radius: 3px;
font-size: 12px;
box-shadow: 0px 1em 1em -1.5em rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.reserve-select:not(:hover)>i.toggle.icon-arrow-down {
display: block !important;
}
.reserve-select:not(:hover)>i.toggle.icon-arrow-up {
display: none !important;
}
.reserve-select:not(:hover) label.option>input:not(:checked)~span.title {
display: none !important;
}
.reserve-select>i.toggle {
position: absolute;
z-index: 4;
right: 1.5em;
top: 1.6em;
color: #ccc;
}
.reserve-select .title,
.reserve-select .placeholder {
position: relative;
display: block;
width: 100%;
height: 100%;
padding: 1.5em 2em;
background: white;
border-top: 1px solid rgba(0, 0, 0, 0.05);
cursor: pointer;
}
.reserve-select>input {
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
width: 100%;
height: 100%;
display: block;
opacity: 0;
cursor: pointer;
}
.reserve-select>input:checked~i.toggle.icon-arrow-down {
display: none;
}
.reserve-select>input:checked~i.toggle.icon-arrow-up {
display: block;
}
.reserve-select>input:checked div.options label.option .title {
display: none !important;
}
.reserve-select>input:not(:checked) {
z-index: 4;
}
.reserve-select>input:not(:checked)~label.option>span.title {
display: none;
}
.reserve-select>input:not(:checked)~i.toggle.icon-arrow-up {
display: none;
}
.reserve-select>input:not(:checked)~i.toggle.icon-arrow-down {
display: block;
}
.reserve-select>input:disabled {
cursor: no-drop;
}
.reserve-select>span.placeholder {
position: relative;
z-index: 0;
display: inline-block;
width: 100%;
color: #999;
border-top: 0px;
}
.reserve-select label.option {
display: block;
overflow: hidden;
z-index: 1;
width: 100%;
transition: all 1s ease-out;
}
.reserve-select label.option span.title {
position: relative;
z-index: 2;
transition: background .3s ease-out;
}
.reserve-select label.option span.title i.icon {
padding-right: 8px;
color: #92a8d1;
}
.reserve-select label.option span.title:hover {
color: white;
background: #3498db;
box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.1);
}
.reserve-select label.option input {
display: none;
}
.reserve-select label.option input:checked~span.title {
position: absolute;
display: block;
z-index: 3;
top: 0px;
font-size: 12px;
background: #fff;
border-top: 0px;
box-shadow: none;
color: inherit;
width: 100%;
}
.reserve-select label.option input:disabled~span.title {
background: #f9f9f9 !important;
color: #aaa;
}
.reserve-select label.option input:disabled~span.title:hover {
color: #aaa;
background: none;
cursor: no-drop;
}
<div class="reserve-select">
<input type="radio" name="option">
<span class="placeholder">Choose...</span>
<label class="option">
<input type="radio" name="option">
<span class="title">Speedometer</span>
</label>
<label class="option">
<input type="radio" name="option">
<span class="title">Fire</span>
</label>
<label class="option">
<input type="radio" name="option">
<span class="title">Badge</span>
</label>
</div>
<div class="paragrafo">
<p>Teste</p>
</div>
LINK: https://jsfiddle.net/o2gxgz9r/13580/

Answer 1

try this.Wrap options in a div and give position absolute for that div
body {
width: 100%;
min-height: 500px;
margin: 3em auto;
background: white;
/* IE6-9 fallback on horizontal gradient */
font-family: 'Roboto', sans-serif;
letter-spacing: 1px;
}
h1 {
text-align: center;
color: #fff;
font-weight: 300;
font-size: 50px;
font-family: ProximaNovaSoftW03-Semibold;
letter-spacing: 0px;
text-shadow: 1px 1px rgba(0, 0, 0, 0.02), 2px 2px rgba(0, 0, 0, 0.02), 3px 3px rgba(0, 0, 0, 0.02), 4px 4px rgba(0, 0, 0, 0.02), 5px 5px rgba(0, 0, 0, 0.02), 6px 6px rgba(0, 0, 0, 0.02), 7px 7px rgba(0, 0, 0, 0.02);
}
h1 i {
position: relative;
font-size: 70px;
}
p {
text-align: center;
color: #000;
font-size: 14px;
margin-bottom: 2em;
line-height: 30px;
}
p img {
position: relative;
top: 8px;
right: 10px;
}
.paragrafo {
width:100%;
background-color: #e1e1e1;
z-index: 1;
}
.reserve-select {
position: relative;
//overflow: hidden;
display: block;
margin: auto;
width: 330px;
height: 100%;
border-bottom: 0px;
border-radius: 3px;
font-size: 12px;
box-shadow: 0px 1em 1em -1.5em rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.reserve-select:not(:hover) > i.toggle.icon-arrow-down {
display: block !important;
}
.reserve-select:not(:hover) > i.toggle.icon-arrow-up {
display: none !important;
}
.reserve-select:not(:hover) label.option > input:not(:checked) ~ span.title {
display: none !important;
}
.reserve-select > i.toggle {
position: absolute;
z-index: 4;
right: 1.5em;
top: 1.6em;
color: #ccc;
}
.reserve-select .title,
.reserve-select .placeholder {
position: relative;
display: block;
width: 100%;
height: 100%;
padding: 1.5em 2em;
background: white;
border-top: 1px solid rgba(0, 0, 0, 0.05);
cursor: pointer;
}
.reserve-select > input {
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
width: 100%;
height: 100%;
display: block;
opacity: 0;
cursor: pointer;
}
.reserve-select > input:checked ~ i.toggle.icon-arrow-down {
display: none;
}
.reserve-select > input:checked ~ i.toggle.icon-arrow-up {
display: block;
}
.reserve-select > input:checked div.options label.option .title {
display: none !important;
}
.reserve-select > input:not(:checked) {
z-index: 4;
}
.reserve-select > input:not(:checked) ~ label.option > span.title {
display: none;
}
.reserve-select > input:not(:checked) ~ i.toggle.icon-arrow-up {
display: none;
}
.reserve-select > input:not(:checked) ~ i.toggle.icon-arrow-down {
display: block;
}
.reserve-select > input:disabled {
cursor: no-drop;
}
.reserve-select > span.placeholder {
position: relative;
z-index: 0;
display: inline-block;
width: 100%;
color: #999;
border-top: 0px;
}
.reserve-select label.option {
display: block;
overflow: hidden;
z-index: 1;
width: 100%;
transition: all 1s ease-out;
}
.reserve-select label.option span.title {
position: relative;
z-index: 2;
transition: background .3s ease-out;
}
.reserve-select label.option span.title i.icon {
padding-right: 8px;
color: #92a8d1;
}
.reserve-select label.option span.title:hover {
color: white;
background: #3498db;
box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.1);
}
.reserve-select label.option input {
display: none;
}
.reserve-select label.option input:checked ~ span.title {
position: absolute;
display: block;
z-index: 3;
top: 0px;
font-size: 12px;
background: #fff;
border-top: 0px;
box-shadow: none;
color: inherit;
width: 100%;
}
.reserve-select label.option input:disabled ~ span.title {
background: #f9f9f9 !important;
color: #aaa;
}
.reserve-select label.option input:disabled ~ span.title:hover {
color: #aaa;
background: none;
cursor: no-drop;
}
.options{
position:absolute;
top:50px;
width:100%;
}
<body>
<div class="reserve-select">
<input type="radio" name="option">
<span class="placeholder">Choose...</span>
<div class="options">
<label class="option">
<input type="radio" name="option">
<span class="title">Speedometer</span>
</label>
<label class="option">
<input type="radio" name="option">
<span class="title">Fire</span>
</label>
<label class="option">
<input type="radio" name="option">
<span class="title">Badge</span>
</label>
</div>
</div>
<div class="paragrafo">
<p>Teste</p>
</div>