div
{
width:200px;
height:200px;
position: absolute;
}
.first-container
{
background-color: #9AD0EC;
}
.second-container
{
background-color: red;
left: 200px;
}
.third-container
{
background-color: blue;
left:400px;
}
Despite setting the display property to block, the division element does not block the space in front of it. Why is this happening? Output : https://i.stack.imgur.com/RB3gD.png
Instead of :
An element with absolute positioning no longer adheres to the regular document flow. Instead, it is placed on a separate layer independent of other elements. Rather than being positioned based on its location within the normal flow, absolute positioning specifies the distance from each side of the containing element. developer.mozilla.org/en-US/docs/Web/CSS/position (the "containing element" is the initial containing block.) The properties top, bottom, left, and right are used for positioning relative to the containing block.
Please explain your reasoning with code ---
/* when you apply this style to 'div', nested divs also become absolutely positioned*/
/* Absolutely positioned elements are positioned relative to their nearest positioned ancestor element.*/
/* Then each container div is positioned relative to its nearest div */
/* Comment out this div style and use the following div for solution. */
div {
width: 200px;
height: 200px;
position: absolute;
}
/* Positioned relative to the upper div */
.first-container {
background-color: #9ad0ec;
}
/* Positioned relative to the nearest ancestor with positioning (first-container) */
.second-container {
background-color: red;
left: 200px;
}
/* Positioned relative to the nearest ancestor with positioning (second-container) */
.third-container {
background-color: blue;
left: 200px;
top: 200px;
}
<body>
<div>
<div class="first-container" />
<div class="second-container" />
<div class="third-container" />
</div>
</body>
To achieve the desired output, 'top' or 'bottom' needs to be set in the container-style. Check this sandbox
Currently, I am working with Node.js and MongoDB where my database is hosted on MongoHQ (now compose.io). I have come to understand that document IDs are converted to hex strings, but I am struggling to retrieve a document using its ID. In my dataset, the ...
I have a node application running with pm2, and I need to save data before the application closes. The following code works perfectly in the shell: process.on('exit', function(){ log.debug('exit'); }); process.on('SIGINT&apos ...
Currently, I am developing a Web Application using NodeJs, Express, and Pug/Jade. The pug code below is functional: iframe#map(width="100%", height="600", frameborder="0", style="border:0" src='https://www.google.com/maps/embed/v1/place?' + ...
I am relatively new to the React environment and recently created a basic component for a bookmarking feature. Essentially, when the favourite icon is clicked, an ajax call is sent > a record is created in the database > on ajax success, a flash me ...
As I embark on my inaugural Stencil project, I've encountered a puzzling error message: Cannot download "https://github.com/ionic-team/stencil- component-starter/archive/master .zip" Check your internet connection Error: connect ETIMEDOUT" De ...
In JavaScript, why is it possible to call a function like this when tested with node.js: ~$ node > function hi() { console.log("Hello, World!"); }; undefined > hi [Function: hi] > hi() Hello, World! undefined > hi)( // Why does this work? Hell ...
$scope.articles = [ { link: "http://google.com", source: "Google", title: "hello", "date": new Date(2008, 4, 15) }, ]; <tbody> <tr ng-repeat = "article in articles | orderBy:sortType:sortReverse | filter:searchArticle ...
I am currently attempting to automate the submission of data into the online forms found on this webpage: Unfortunately, I am unable to determine the specific names of these forms by inspecting the source code. I have tried using the requests python modul ...
Just recently, I made an update to my next.config.json file in hopes of boosting SEO performance. However, this change has caused some issues with the next-sitemap module, preventing me from building or starting my app. //next.config.js const withSitemap = ...
I am looking to create a slideshow for my banner that changes automatically. The banners are located in a folder, and I want the website to display them one by one without manual intervention. Currently, I have managed to display the images from the folder ...
Having trouble passing a variable with [ngStyle] and reading it on the ::before class, any guidance in the right direction would be much appreciated! CSS: .handle-slider__control { height: 7px; z-index:1; background: $colour-alto; positi ...
Hey there! I'm currently working on creating a CSS box with Bootstrap. If you'd like to take a look, feel free to check it out here. I noticed that the padding box isn't affecting the margin-top - any ideas why? Also, I'm trying to ge ...
I'm having trouble getting the following HTML5 Video code to work. Can someone help me spot what I might be missing? <video width="267" poster="Poster.gif" height="209"> <source src="6Minutes_1.mp4" type="video/mp4"></source> <so ...
I want to create a system where the user can select a game from one dropdown menu and then see only the consoles that game is available on in another dropdown menu. For example, if the user selects a game like Forza Horizon which is available on multiple c ...
Could use some assistance with implementing AJAX into my project. It seems like it should be a simple task, but I've been struggling with it for days. My goal is to have new comments appear without the need to reload the page. Below are references to ...
Updating an older website that contains numerous unordered lists has presented a challenge. When the padding is set to 0, the display markers on the unordered list disappear. The root cause of this issue was traced back to the CSS setting *{padding: 0; ma ...
Is there a way to ensure that overlay box height remains the same even if the text lines are not the same length? Below is a snippet of my code. If you have a solution using jQuery or JS, please provide it. Thank you for your time and effort in trying to h ...
My required attribute isn't enforcing mandatory field completion before form submission. HTML Code: <!-- Modal Content --> <form class="modal-content2"> <div class="container3"> < ...
I'm currently in the process of creating a small webpage dedicated to showcasing my top favorite Zelda bosses using HTML, CSS, and Bootstrap 5. To make it more personalized, I decided to veer away from the standard Bootstrap button colors and create m ...
I'm encountering an issue with implementing active navlinks in NextJS version 13.4.4. I need to access the current URL for this solution, but every attempt ends up failing. My folder structure is organized as follows: .next components Header header ...