document
#box {
width: 400px;
height: 100px;
background: #ff5555;
position: relative;
display: flex;
margin-left: 200px;
box-shadow: 0px 0px 5px;
padding: 2px;
}
#btn {
position: absolute;
right: 0;
top: 0;
transform: translate(100%, 0);
}
#btn1 {
position: absolute;
right: 0;
top: 0;
transform: translate(100%, 100%);
}
#btn2 {
position: absolute;
right: 0;
top: 0;
transform: translate(100%, 200%);
}
#btn3 {
position: absolute;
right: 0;
top: 0;
transform: translate(100%, 300%);
}
#btn4 {
position: absolute;
right: 0;
top: 0;
transform: translate(100%, 400%);
}
.item {
width: 50px;
text-align: center;
color: #fff;
text-decoration: underline;
}
.item:nth-child(1) {
background: #eacf7d;
font-size: 20px;
}
.item:nth-child(2) {
background: yellowgreen;
font-size: 25px;
}
.item:nth-child(3) {
background: deepskyblue;
}
.four {
background: coral;
color:#fff;
font-size: 15px;
text-align: center;
width:50px;
text-decoration: underline;
}
#range {
position: absolute;
left: 0;
bottom: 0;
transform: translate(0, 100%);
cursor: pointer;
}
1
2
3
4
