Position of fixed div set relative to its parent fixed div

I'm facing an unusual situation where I need a fixed div to be positioned relative to its parent, which is also a fixed div.

When you take a look at my example, everything will become clear.

<div class="drawer">
    <p>Drawer</p>
</div>
<div class="sub-drawer">
    <a href="#" class="close-drawer">x</a>
    <p>Sub Drawer</p>
</div>

Essentially, I am creating a drawer that slides out from the left side of the page. The first drawer serves as a menu while the sub drawer displays content based on what users click in the first drawer. The sub drawer should be scrollable. However, I'm struggling with placing a fixed close link at the top right of the sub drawer so that it remains visible even when users scroll through the contents.

View the demo here: http://jsfiddle.net/z1n7kmky/

htmlcss

Answer №1

Your layout utilizes fixed positioning, meaning that the top, left, and other offsets are relative to the screen (root element).

To achieve your desired layout, you can follow these steps:

Firstly, wrap your content in a div with the class .wrap, position this div absolutely inside .sub-drawer, and adjust the top and bottom offsets to fill the space as required.

Enable scrolling on the .wrap element instead of the .sub-drawer.

Next, position the .close-drawer div absolutely within the .sub-drawer as per your original intention.

For a visual representation, refer to the code snippet provided below or access the fiddle link: http://jsfiddle.net/audetwebdesign/q6L7q70a/

.drawer {
    position:fixed;
    width:200px;
    top:0;
    left:0;
    bottom:0;
    background:#666;
    padding:25px;
}

.sub-drawer {
    position:fixed;
    width:200px;
    left:200px;
    top:0;
    bottom:0;
    background:#999;
}
.sub-drawer .wrap {
    position:absolute;
    top:0;
    bottom:0;
    padding: 25px;
    overflow: scroll;  
}
.close-drawer {
    position:absolute;
    top:10px;
    right: 25px;
    border: 1px solid blue;
}
<div class="drawer">
    <p>Drawer</p>
</div>
<div class="sub-drawer">
    <a href="#" class="close-drawer">x</a>
    <div class="wrap">
    <p>Sub Drawer</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis iaculis, dolor at malesuada gravida, mi arcu mollis quam, vel mattis velit mi eu arcu... [truncated for brevity]

Answer №2

The issue at hand (as you may have already realized) is that a fixed element does not conform to the regular page layout and only adheres to the topmost stacking context, which is the window.

To address this issue, the solution is to turn the wrapper element (.sub-drawer) into a stacking context within the page. The recommended method to achieve this is by applying a transform property to it. To avoid any disruption to the page layout, consider adding an inconsequential scale transform:

View Updated Example

.sub-drawer {
    position:fixed;
    width:200px;
    left:200px;
    top:0;
    bottom:0;
    background:#999;
    overflow:scroll;
    padding:25px;
    transform: scale(1,1);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unveiling and Shifting Among Concealed HTML Forms

After going through numerous tickets with similar questions, I still can't seem to achieve what I want. So, I have no choice but to ask this question myself. I currently have an HTML page with 2 forms and 2 buttons. Both forms are initially hidden us ...

javascripthtml

Asynchronous AJAX request using JQuery loader with async:false setting

As a newbie to the world of jQuery, I find myself lost in solving my current issue. Despite checking various solutions to similar problems, none seem to work for me. Working on MAC OS X using Safari with JQuery 2.1.1, I must ensure that my platform is comp ...

phpjqueryhtmlajax

Retrieving Form Validation Error Value in AngularJS

Incorporating AngularJS 1.2 RC2 and utilizing Bootstrap for CSS, I have constructed a straightforward form as shown below: <form class="form-horizontal" name="form" novalidate> <label class="col-lg-2 control-label" for="name">Name</labe ...

javascripthtmlformsangularjs

Text Fade-in Animation with CSS 3

Could someone assist me in creating an animation similar to a marquee using CSS "animation" and "keyframes"? I attempted to move text from top to bottom, but encountered an issue where the text would only restart its movement from the top once it reached ...

csscss-animations

What could be the reason behind my image displaying correctly in the majority of browsers, yet not in Internet Explorer

The HAML code below is what I have: %header .grid %a{:name => "top"} .logo %a{:href => root_path} =image_tag("logo3.png") .tagline .clearfloat %p Fast Facts About Your Website, Your Competitors And Best ...

htmlcssinternet-explorersusy-compass

Ensure that grid rows occupy the least amount of space possible

I'm relatively new to grid layout and I've encountered a challenge that has me stuck. Here's what I have so far: codepen And this is the relevant part of the grid: grid-template: 'img date' 'img head' 'img s ...

htmlcsscss-grid

Spree Deluxe - Customizing color scheme variables

We're struggling to modify the color variables in Spree Fancy. The documentation suggests creating a variables_override.css.scss file. But where exactly should this file be placed? We've tried adding it under the stylesheets folder in assets and ...

cssruby-on-railssassspree

The media query for mobile is not functioning properly

Hello, I have a page with MVC that includes CSS for iPad and mobile devices. The media query for iPad (@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)) works perfectly, but I am struggling to get the media query for mobile ...

cssmobilemedia-queries

CSS Priority - determining the ultimate winner

I have an upcoming exam and I'm reviewing the previous exam paper that was given to me. The question is: When multiple style sheet rules are applied to the same element, which type of rule takes precedence? a. Any declaration from the browser b. ...

css

Why does my element appear to be a different color than expected?

I've developed a sleek wind map (check out for reference). Using a weighted interpolation every 10ms, I generate uVector and vVector data to calculate wind speed. Based on this speed, each point is assigned a specific color as outlined below. if (we ...

javascripthtmlcolorshtml5-canvasline

Amount of information gathered through Ruby Mechanize

agent = Mechanize.new url = "---------------------------" page = agent.get(url) I am curious to find out the amount of data in kilobytes consumed by my internet service provider for fetching this information. Specifically, I would like to determine the s ...

rubyruby-on-rails-3.2sizemechanizehtml

Compilation of CSS by Webpack resulting in peculiar class identifiers

Currently, I am using webpack for developing a React app with a NodeJS backend. I've encountered an issue with styling the app as webpack seems to be interfering with my CSS, causing changes in class names. For example, in my base.css file, I have d ...

cssnode.jsreactjswebpack

Grid layout with Tailwind

I'm facing a challenge in my Angular project where I need to create a grid layout with 2 rows and 6 columns using Tailwind CSS. The actors array that I am iterating through contains 25 actors. My objective is to show the first 12 actors in 2 rows, fo ...

cssangularcss-gridtailwind-css

When I open my website in a new tab using iOS and Chrome, the appearance of the absolute element is being altered

I am experiencing an issue with a div that is positioned absolutely at the bottom left of my website. When I open the site in a new tab using <a target="_blank" href="./index.html">, the bottom value is not being applied correctly ...

javascripthtmlcss

Enhancing elements in Bootstrap Studio with borders

After exploring the interface of bootstrap-studio, it appears that there is no direct option to add a border to an element. However, this can still be achieved either through custom css code or by utilizing the predefined boostrap border classes. You may r ...

htmlcsstwitter-bootstrapfrontendbootstrap-studio

Stop the scrolling behavior from passing from one element to the window

I am facing an issue with a modal box window that contains an iframe. Inside the iframe, there is a scrollable div element. Whenever I try to scroll the inner div of the iframe and it reaches either the top or bottom limit, the browser window itself start ...

javascriptjqueryhtmleventsscroll

What is the best way to incorporate text animation into a website using Cascading Style Sheets (CSS)?

Is there a way to make my text flash twice per second? I attempted to create animated text, but it didn't work out! ...

htmlcssanimationtextcss-animations

Getting the badge value of a button in Angular JS is a simple process that involves accessing

How can I retrieve the badge value of a Button? This badge represents data-text-as-pseudo-element and I am new to Angular. Can someone guide me on how to achieve this? <style type="text/css">[data-text-as-pseudo-element]::before { content: ...

htmlcssangularjs

"Manipulating a drop-down menu in HTML with data from a MySQL database using PHP

Hello there, I could use some assistance. I am working on a straightforward web application and require help with a specific task. Here's the scenario: I have an HTML form with a single combo box. I would like to populate this combo box with data fro ...

phphtmlmysqlforms

What is the best way to erase information displayed when hovering over an element using mouseout?

Whenever the user hovers over an image, an information box appears regarding that specific image. The information inside the box changes as I move over another image, but when not hovering over any images, the information box remains visible. Unfortunately ...

javascriptphpjquerycssweb