I am terrible at css, please bear with me.

Three elements, .subscribe, #pictures, #menu

need both .subscribe and #menu to be overlay on top of pictures. css below (all selectors are correct). I thought just z-index and positioning would do it, however, it's not working out. Anything obviously wrong?:

#slideshow #pictures { background: url('images/bg.jpg'); width: 926px; height: 335px; left: 0; overflow: hidden; }
#slideshow #pictures li { display: block; position: absolute; top: 0; width: 926px; }
#slideshow #pictures li img { display: block; position: relative; bottom: 0; }
#slideshow #menu { list-style-type: none;  right: 0; padding-top: 290px; padding-right:20px}
#slideshow #menu li { display: block; float:right; z-index: 1000; }
#slideshow #menu li a { display: block; font: 11px "Lucida Grande", "Verdana"; text-decoration: none; padding: 7px 0 7px 28px; z-index: 1000; color: #ccc; line-height: 14px; vertical-align: middle; }
#slideshow #menu li a:hover { color: #fff; }
#slideshow #menu li.current a { font: 15px "Georgia"; color: #fff; padding: 5px 0 5px 28px; line-height: 18px; }
#slideshow #pictures .subscribe { height:91px; width:252px; position:relative; margin-top:100px;  float:left; bottom: 0;  z-index: 100; background: url('images/SubscribeButton.png'); }
#slideshow #pictures .subscribe:hover { background: url('images/SubscribeButton-Dark.png'); }

1 answer

1
point

When you are using position you do not need any floats and define your positions; top or bottom and left or right. For older browsers (IE) the parent element needs to have position: relative, the child element (the element you want to to position) needs to have position: absolute and the top or bottom and left or right values. If you use overflow: hidden on a parent element with a child element that has a position:absolute value you will run into issues if your child element tries to go outside of the parent element.

div#parent-element{ width: 600px; height: 200px; float: left; position: relative; z-index: 10}

ul#child-element{display: block; width: 200px; height: 150px; position: absolute; top: 20px; left: 40px; z-index 20}

<div id="parent-element">
    <ul id="child-element"><li>Hello</li></ul>
</div>

Edited to add z-indexes...

Answered almost 8 years ago by Don Jones