Menu
I would like two create two buttons that overlay a div using HTML like the following:
*Both the same DIV with two buttons overlapping each side. So one div with two buttons overlapping.
I would like the buttons to be transparent and overlay the div but I am not sure how.
I have created my Div:
<div class="container">
<div id="slides">
<img src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
</div>
</div>
The div I would like to overlay is called "container" and the two buttons are:
<a href="#" class="slidesjs-previous slidesjs-navigation"><i class="icon-chevron-left icon-large"></i></a>
<a href="#" class="slidesjs-next slidesjs-navigation"><i class="icon-chevron-right icon-large"></i></a>
Is there any way in CSS or HTML to do this?
229
Answer: Use the CSS z-index Property You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element.
Set the position property value for the parent to relative (to control overlap) and that of the button DIV to absolute . Now place your button inside the button DIV , then use negative values for left , right , top or bottom to position the button DIV where you want. Save this answer. Show activity on this post.
If you have multiple buttons that should sit side-by-side on the same line, add the data-inline="true" attribute to each button. This will style the buttons to be the width of their content and float the buttons so they sit on the same line.
To overlap the div2, follow the given instructions: Set the value of position property, width, and height of the div2 same as the “div1”. Set the value of the z-index as “2” to place it in front of the first div. Set a different background color for the div2 as “rgb(0, 204, 255)”.
You have to place your buttons absolutely on top of your image. To do so, first make .container take a position: relative; and then put your buttons as siblings of your .slides div and place them absolutely.
.container {
position: relative;
}
.slidesjs-navigation {
position: absolute;
top: 0;
display: block;
width: 50%;
height: 100%;
background: rgba(0,0,0,0); /* Added in case you want to transition this */
}
.slidesjs-navigation:hover {
background: rgba(0,0,0,0.25); /* Makes the hovered button visible */
}
.slidesjs-previous {
left: 0;
}
.slidesjs-next {
right: 0; /* left: 50%; works too */
}
.slides img {
display: block; /* Avoids the space usually seen under inline images */
width: 100%; /* Ensures the image takes up the whole width */
}<div class="container">
<div id="slides" class="slides">
<img src="https://c1.staticflickr.com/5/4147/5087404401_d24513119a_b.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/"><!-- original `src`: "img/example-slide-1.jpg" -->
</div>
<a href="#" class="slidesjs-previous slidesjs-navigation"><i class="icon-chevron-left icon-large"></i></a>
<a href="#" class="slidesjs-next slidesjs-navigation"><i class="icon-chevron-right icon-large"></i></a>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
