Results 1 to 2 of 2

Thread: absolute and sticky positioning at the same time

  1. #1
    Join Date
    Jun 2008
    Posts
    187
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default absolute and sticky positioning at the same time

    Hello,

    I've got a scrollable div with a list of items in it:

    Click image for larger version. 

Name:	no_panel.jpg 
Views:	78 
Size:	51.6 KB 
ID:	6212

    I want to add a panel overtop it with 50% opacity. It should remain fixed at the top with the list of item visible behind it:

    Click image for larger version. 

Name:	absolute_panel.jpg 
Views:	75 
Size:	45.1 KB 
ID:	6213

    For the above image, I specified the CSS of the panel like so:

    Code:
    <div style="width: 100%; height: 200px; background-color: black; opacity: 0.5; z-index: 10; position: absolute; top: 0; left: 0;"></div>
    This accomplishes the requirement of having the list of item behind it visible, but it doesn't remain fixed when I scroll.

    So then I tried this:

    Code:
    <div style="width: 100%; height: 200px; background-color: black; opacity: 0.5; z-index: 10; position: sticky; top: 0; left: 0;"></div>
    Click image for larger version. 

Name:	sticky_panel.jpg 
Views:	79 
Size:	39.2 KB 
ID:	6214

    That fixed the panel but as you can from the image above, it pushes the list of items down so that they don't appear behind the panel.

    What would be the solution to this?
    Last edited by jscheuer1; 10-25-2017 at 06:56 PM. Reason: format code

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,734
    Thanks
    46
    Thanked 216 Times in 209 Posts
    Blog Entries
    53

    Default

    Try this:
    Code:
    <div style="position: relative; max-height: 400px; width: 40%; margin: auto; border: 1px solid black; overflow: auto; ">
    <div style="position: fixed; width: calc(40% - 5px); height: 200px; background: black; opacity: 0.5; z-index: -1"></div>
    <div style="padding: 10px">
    item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item
    </div>
    </div>
    If you want clickable elements in the panel, remove z-index: -1 and replace width: calc(40% - 5px) with something like width: calc(40% - 17px) or use javascript to make the width of the fixed panel as wide as 40% (in this case) minus the width of the browser's scrollbar.

Similar Threads

  1. Absolute positioning on drop down
    By livingdeadbeat in forum CSS
    Replies: 0
    Last Post: 08-17-2009, 11:17 AM
  2. <Div style...> help - Absolute positioning
    By roshancoorg in forum JavaScript
    Replies: 1
    Last Post: 06-28-2009, 01:10 PM
  3. Absolute positioning
    By blandydoes2009 in forum CSS
    Replies: 6
    Last Post: 02-08-2009, 04:45 PM
  4. absolute positioning on my div...
    By tanuki in forum HTML
    Replies: 1
    Last Post: 01-04-2008, 05:16 PM
  5. RELATIVE vs. ABSOLUTE positioning
    By TCD in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-13-2005, 11:09 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •