Position a div relative to another div with a static position

Question

Position a div relative to another div with a static position

I am attempting to create a site that is fullscreen and responsive, but I am having issues with elements in the container overflowing on smaller screens, causing it to not be 100% as desired. I have tried using:

top:100%;
position:relative;
width:100%;
height:100%

It works for screens of a certain size, but on mobile devices, it does not work properly and appears partially on the previous container. Is there a way to position from the bottom of the element instead of the top?

http://jsfiddle.net/q8tvwm2k/2/

Update: I have found a somewhat messy solution that seems to work.

javascript jquery html css

Answer 1

Answer №1

It seems like what you are looking for is to use position:absolute in order to position another div relative to it. Perhaps the question was just not phrased accurately. With position:relative, you establish the reference point for child elements positioned with position:absolute, allowing you to utilize properties like top. Here is a basic structure to illustrate this concept:

HTML

<div class='surround'>
  <div class='inside'>
    <div class='outer'>
      <div class='inner'>
      </div>
    </div>
  </div>
</div>

CSS

.surround{
  position:relative;
}
.inside{
  height:100px; width:100px; position:absolute; top:100px; left:100px;
}
.outer{
  height:100px; width:100px; position:relative;
}
.inner{
  position:absolute; top:30px; left:10px;
}

Answer 2

It seems like what you are looking for is to use position:absolute in order to position another div relative to it. Perhaps the question was just not phrased accurately. With position:relative, you establish the reference point for child elements positioned with position:absolute, allowing you to utilize properties like top. Here is a basic structure to illustrate this concept:

HTML

<div class='surround'>
  <div class='inside'>
    <div class='outer'>
      <div class='inner'>
      </div>
    </div>
  </div>
</div>

CSS

.surround{
  position:relative;
}
.inside{
  height:100px; width:100px; position:absolute; top:100px; left:100px;
}
.outer{
  height:100px; width:100px; position:relative;
}
.inner{
  position:absolute; top:30px; left:10px;
}

Position a div relative to another div with a static position

Answer №1

Similar questions

How to empty an array once all its elements have been displayed

Enhancing password security with an Ajax form field

"Enhance your website with the ability to dynamically load and display

How can we compress videos on an Android device prior to uploading them through a web browser?

Unable to locate the JSON file in the req.body after sending it through an HTTP post request

Experiencing 429 Too Many Requests error on Angular 7 while attempting to perform multiple file uploads

The issue of button onclick textfield validation malfunctioning

Exploring potential arrays within a JSON file using TypeScript

What is the best way to utilize a variable across all functions and conditions within an asynchronous function in Node.js?

Verifying the presence of an ID within a jquery cookie

What is the method for adding data to a table without utilizing an ID field?

Disable hover effects in CSS with JavaScript

show button after the page has finished loading

Utilizing FCKEditor to incorporate dimensions of width and height into image elements

The attribute 'split' is not found on the never data type

Is it possible for me to verify the login status of an Auth0 user within my custom NextJS _app.js file?

Is it possible to eliminate a style that was applied using the .css() method?

I've encountered the error of receiving a __PHP_Incomplete_Class Object when attempting to create a session using jQuery-ajax

Personalize the checkout form based on the presence of applied discounts in the WooCommerce platform

Text fields do not show a cursor icon