Tips for maintaining a fixed div within another div using absolute positioning

When the mouse hovers over an element, a hidden div with absolute positioning is displayed. At the bottom of this div, there should be another fixed div.

Take a look at the image to see what I am trying to achieve.

This is the CSS code I have written for this:

CSS

.showpro{position:absolute;z-index:999;width:500px;height:auto;display:none;max-height:500px;}
.bottom{width:500px;position:fixed;bottom:0;left:0;}

CODE

<div class='showpro'>
    <div class='top'>

    </div>
    <div class='bottom'>

    </div>
</div>

However, the div appears at the left-bottom corner of the container div with this code. Can anyone explain why this happens and provide assistance?

htmlcss

Answer №1

When you use position: fixed, the element is always positioned relative to the browser window. Consider utilizing position: absolute for that particular "fixed" element.

Take a look at this example below to see the desired outcome:

.container{
  position:relative;
  width:100vw;
  height:100vh;
  background-color:brown;
}
.showpro{
  position:absolute;
  z-index:999;
  width:200px;
  height:auto;
  max-height:300px;
  padding-bottom:80px;
  overflow:hidden;
  background-color:red;
  right:0;
}
.top{
  overflow:auto;
  max-height:220px;
  margin-right: 20px;
}
.bottom{
  width:200px;
  position:absolute;
  bottom:0;
  left:0;
  height:80px;
  background-color:green;}
<div class="container"><div class='showpro'>
    <div class='top'>
Here can be a lot of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class='bottom'>
This is the "fixed" element.
    </div>
</div></div>

Answer №2

Set the positioning to relative for both the parent div and the child div inside:

For example, you can apply this CSS code:

.container {
    position: relative;
}

.child {
    background-color: red;
    height: 150px;
    position: relative;
    top: 20px;
    width: 80px;
}

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

Utilize Material UI SVG icons as background imagery

Is it possible to use svg images from @material-ui/icons as backgrounds for other elements? I attempted the code below without success. import CarIcon from '@material-ui/icons/DriveEtaRounded'; const carIcon = <CarIcon /> function Cover( ...

htmlcssreactjsmaterial-uigoogle-material-icons

Is there a method to view text options that are too long within a fixed width <select multiple> HTML box?

Here is the code I am working with: <div id='div2' style='height: 430px; width: 350px; overflow:auto;'> <select multiple id="id" size="28" style="FONT-SIZE: 12px; FONT-FAMILY: Arial; width: 100%"> It's a challenge bec ...

htmlcssselect

When a height is specified in percentage, the Tbody element does not display correctly on the entire page

Hey there! Currently, I am working on a fixed header table. My goal is to create a table where the tbody section expands with the screen size and I would like to set the height in percentage (%) but unfortunately it doesn't seem to be functioning as e ...

htmlcsshtml-table

Constant 404 Error Plaguing Joomla 3 Website Pages

I've been scouring the internet for a solution, but unfortunately I haven't been able to find any fixes for this issue. I'm able to access the website through domain.com/joomla, however when trying to access it on the main domain without the ...

csstemplatesjoomlajoomla3.0

How can I modify the color of JavaFX text using CSS?

Looking to jazz up my JavaFX application with some custom CSS styling. Managed to link a stylesheet to my app using the following code: //Java code FXMLLoader loader = new FXMLLoader(MainApp.class.getResource("/path/to/fxml")); Scene sce ...

javacssjavafxtextnew-style-class

Issue with parentNode.replaceChild not functioning properly in Internet Explorer 6

In my HTML file created with FCK editor, I attempted to replace an existing table element with a new one using the parentNode.replaceChild method. While this change was successful in Internet Explorer 8, it resulted in errors when viewed in IE6 and IE7. ...

javascripthtmlinternet-explorer-6fckeditor

How can I search for a particular string in JavaScript?

I have a unique custom div that has been modified to function as an input element. Inside this custom div input element, there is a <p> tag with a default placeholder text. My goal is to verify whether the content of this div is empty or contains new ...

javascriptjqueryhtmlcss

Fetching data from MySQL to create statistical analysis

Let's start with the technical setup: Server: Apache/2.2.22 (Debian) Php: 5.4.4-14+deb7u9 MySQL: 5.5.38 This website is utilized by employees to monitor their daily tasks. As I began developing statistic pages in html/php for a monthly summary, ...

phphtmlmysqlstatistics

Guide to Angular Directives: Assigning Attributes to innerHTML

Looking to add attributes to the inner HTML myTemplate.html <div class="custom-template"></div> HTML <template></template> directive app.directive('template', ['$compile', function($compile) { retur ...

javascripthtmlangularjsangular-directive

When I increase the length of my website's header and footer, I notice that the data in the footer is only displayed on the homepage and not on the other

I am facing an issue with extending my header and footer in Django. The problem is that when I pass data to the footer, it only appears on the home page and not on other pages. I understand that I need to pass the data to every page individually, but I am ...

pythonhtmldjangodjango-templatesjinja2

Is it possible for me to utilize a validation function to display error messages within a specific span id tag?

document.getElementById("button1").addEventListener("click", mouseOver1); function mouseOver1(){ document.getElementById("button1").style.color = "red"; } document.getElementById("button2").addEventListener("click", mouseOver); function mous ...

javascriptjqueryhtmlcss

Access a local website path using JavaScript upon opening the browser

I need a Javascript function that can determine the day of the week when my html file is accessed, allowing me to automatically open a specific sub-page within my project. ...

html

Using pseudoclasses in combination with BEM: A beginner's guide

How can I effectively utilize pseudo-classes while adhering to the principles of BEM methodology? I'm facing a specific challenge with creating a custom checkbox functionality. Normally, I would use the input:checked + label selector. However, when t ...

htmlcsspseudo-elementpseudo-classbem

Utilizing a webkit transition to conceal a div element by setting its display property to "none"

I'm currently working with code that looks something like this: <style> #submenu { background-color: #eee; height:200px; width:400px; opacity: 1; -webkit-transition: all 1s ease-in-out; } .doSomething { ...

csshtml5-animation

Tips for concealing text within navbar components for various screen sizes in Bootstrap 4

Is there a way to hide certain elements of a bootstrap navbar inline without creating new elements for each screen size? I attempted using a span, but it caused the line to wrap. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/ ...

javascripthtmlbootstrap-4

Bootstrap 4's form validation feature is malfunctioning

link to plunker Here's what I'm looking to achieve. I am currently using Bootstrap 4 for my website. Specifically, I have a basic contact form that I am attempting to enhance with tooltip validation. Unfortunately, the form validation is not ...

htmlcsstwitter-bootstrapbootstrap-4

Adjust the angle and trim an image on one side

Can someone assist with making an image appear like this: https://i.sstatic.net/J4DPp.jpg I'm attempting to achieve this look using CSS: https://i.sstatic.net/fuucK.png I've experimented with skewing but the red area persists, regardless of t ...

htmlcsstransform

Ensure that only one checkbox is checked at a time and that unchecking one does not remove the

https://i.sstatic.net/EEC2U.png I am facing an issue with two checkboxes in my code. When I click on the first checkbox in the featured playlist section, another popular genre checkbox should be unchecked. However, only the value changes and the checked m ...

jquerycss

Looking for a never-ending whiteboard experience with React that includes zoom, pan, and pinch functionality

Recently, I put together a flow chart with the help of the npm package react-zoom-pan-pinch Issue : One problem I encountered is that the chart has boundaries on the left and top, while appearing infinite on the right and bottom. Is there a way to expan ...

cssreactjsreact-chartjs

What criteria do browsers follow to determine the specific colors to use for border styles like inset and outset?

When I set border: 1px outset blue; as the style for an element, the browser displays two distinct border colors: one for the top and left borders, and another for the bottom and right borders. li { border: 10px outset #0000FF; color: #FFF; ...

css