Inquiring about the dimensions of a fixed-positioned element

I'm a beginner in CSS and I have a question about the display property. If an element has position: absolute, does it still behave as a child of its parent or is it completely out of the flow?

For instance:

**HTML**

<div class="container">
   <div class="my_div">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       In sit amet nibh et arcu gravida tincidunt. Nam dignissim elit
       vitae erat porta, at efficitur lacus consequat. Sed molestie,
       mi a efficitur elementum, lacus metus hendrerit libero, posuere
       ultricies urna libero nec quam. 
   </div>
</div>


**CSS**

.container div {
   width: 50%;
}

.my_div {
   position: absolute;
}

Before setting position: absolute, my_div's width matches that of the container since it follows the .container div{} rule. However, after changing to position: absolute, I am unsure if my_div's width is still governed by the CSS rule.

Answer №1

The concept of the "parent-child relationship" remains constant (thus, it will still be considered a child element in the DOM), but the overall "(document) flow" does undergo a change.

When you apply position: absolute;, the element is taken out of the regular document flow, impacting various properties as you may have observed.


Given your mention of being new to CSS, it's important to note that in most cases, when tutorials or books online recommend using properties like position and float, they might be steering you towards outdated or misguided practices.

In today's landscape, tools such as flexbox (display: flex) and grid (display: grid) have made tackling layout challenges, which were once complex, incredibly straightforward.

Answer №2

While the child remains connected to its parent, it also exists outside of the regular page flow. By giving the parent element a CSS property of position: relative;, you can maintain certain relationships between the child and the parent (such as using top values). Typically, absolutely positioned elements need explicit declaration of height and width, but this requirement varies depending on your specific design goals...

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

Internet Explorer is not compatible with jQuery tabs, unlike Chrome where they function properly

I require assistance with a web application I am developing that utilizes jQuery tabs. The application consists of two pages, index.aspx and login.aspx. When accessing the index page and logging in, users are directed to the login page. The tabs function p ...

Debugging with Symfony's debug bar in Internet Explorer 8

Working on a Symfony 2 project in development environment, I noticed that the Symfony debug bar appears correctly with all browsers except for IE8. It seems like the CSS for the bar is not loading properly in IE. Upon further investigation, I found that t ...

Creating a class in JavaScript based on the name of a background image

I have successfully created div elements using JavaScript, each with a unique background image. Now, I am looking for a way to dynamically add a class name to each div based on the name of its background image in JavaScript or jQuery. // adding divs to ma ...

Tips for triggering a method when clicking instead of using v-for in Vue.js

I need help arranging an array of objects based on their ratings. Currently, I am able to display the items from highest to lowest rating using the v-for method. But, I would like to first display the objects in their original order and then have a button ...

When I make an Ajax request, the response always seems to be the entire webpage instead of just the text I

Here is the javascript code I am using: function validate() { debugger; var username = document.getElementById('<%=txtUserName.ClientID %>').value; var password = document.getElementById('<%=txtPassword.Cl ...

Controller for Ionic 3 styles and loading animations

What is the best way to eliminate these white spaces in our fullscreen mode? View the image here removeWhiteSpace() { let space = document.getElementById('white-space'); if (space) { space.style.display = 'none'; ...

Tips for comparing an input value with a data attribute

I'm having trouble getting my input value to match a data attribute within my code. Here is an example of what I am trying to achieve: HTML: <input value="" data-match="Training"> jQuery: var wrd = $('.js-search-input').data(' ...

Localized Error: The property 'clientWidth' cannot be retrieved as the object is null or undefined

The issue with the error message seems to only occur on Internet Explorer, and unfortunately there doesn't seem to be a clear solution at the moment. Even after setting http-equiv="X-UA-Compatible" to IE8, the problem persists and I cannot seem to re ...

Displaying singular row from jQuery AJAX response on a DataTable

Two different functions were created using jQuery. The first function, table(), loops through an object from JSON response in a jQuery Ajax success and then calls the second function, column(), with a parameter being an element of the array from the object ...

Leverage CSS to create a hover effect on one element that triggers a change in another

How can I use pure CSS to make an image appear when hovering over text? HTML <h1 id="hover">Hover over me</h1> <div id="squash"> <img src="http://askflorine.com/wp-content/uploads/2013/10/temp_quash.jpg" width="100%"> </div&g ...

Adjust the dimensions of the initial cell

I need to adjust the size of the initial "generated" cell in a grid. The grid is not present in the HTML markup until JavaScript prints RSS information on it, making it difficult to target specific rows or cells directly. Note: The first element is hidden ...

What is the best way to sort through a json array in angularjs?

My $scope values consist of two types: an array and a json array $scope.extensions = ["jpg", "xlsx", "pdf", "docx", "mp4"] $scope.files ={'exten':"jpg","Value":""filepath/data1.jpg"},{'exten':"pdf","Value":""filepath/data2.pdf"},{&apo ...

Is it possible to incorporate Node.js for form submission on a static website?

Currently, my website only consists of a home page and a contact page with navigation done through HTML and href links. To handle form submission on the contact page, I have set up a node.js server using express, nodemailer, and nodemailer-mailgun-transpo ...

PHP Authentication using Text File

Is there a way to display user data in row by row format in text files after they have filled out a form? Here is an example of how the data should look: <!DOCTYPE HTML> <html> <head> </head> <body> <?php // define vari ...

Implement dynamic CSS color selection based on server-side data

Introduction At our company, we manage a large client website in Optimizely (ASP.NET MVC) that hosts multiple smaller sites for different regions and important customers. Currently, our frontend team creates various themes using SASS to CSS conversion, w ...

clicking on a DIV element

I am trying to trigger a JavaScript function by clicking on a DIV element, but for some reason it is not working as expected. I have gone through various examples provided by the helpful people here, but still can't figure out what I'm doing wron ...

Loading default values into HTML/Jade in an Express/node.js web application

My web application is developed with Express for node.js. I have utilized Jade template files for the HTML views. On one of these views, I want the input fields to be pre-filled with data. The data is stored in a mongodb session store, as well as in anot ...

Looking to streamline your design? Find out how to translate multiple elements to the same position seamlessly

Greetings! This is my debut post on this platform. I am currently engrossed in a project that has presented me with a challenge, and I'm reaching out to seek your insights on a potential solution. Here's the scenario: I have a parent div containi ...

What is the best way to dynamically adjust CSS based on the screen size of the user?

In a typical scenario, as soon as the end user accesses the page, we load all the CSS associated with it. However, the user is usually only concerned with what is visible on the screen initially. This results in unnecessary loading of CSS components for no ...

jquery expanding the width of the final element

Is there a way to increase the width of the last 'th' in a string? I want it to be the current width plus 20px. Here is the code on Fiddle var header="<th id='tblHeader_1' style='width: 80px;'><span>Id</span&g ...