Is there a way to apply the 'absolute' or 'fixed' with a width of 100% to the parent div specifically, rather than to the window size?

I would like to create a banner similar to the one shown here: https://i.sstatic.net/SZLr9.png

I am attempting to achieve this using 'absolute' or 'fixed' positioning.

However, when I tried using 'left: 0 right: 0 top: 0', it ended up looking like this: https://i.sstatic.net/MXEmZ.png

Alternatively, setting the width to '100%' caused it to shift to the right. How can I position 'A' as shown in the first image? I prefer not to use relative or static positioning as they cause content displacement.

Answer №1

Using the CSS property position: relative; on the parent div (the black box in your example) will allow you to achieve the desired effect, even though it cannot be done with fixed.

But why does this work?

The element is positioned absolutely to its first parent with a defined position -- DZone

In simple terms, setting the parent div as position: relative; will make the child element with position: absolute; position itself according to that parent div rather than the document body.

I hope this explanation helps clarify things, but feel free to ask if anything is still unclear.

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

What could be causing the React-Router-Dom Outlet to not show the component?

I am working on a component that houses four different components. const ProtectedRoute = () => { return ( <> <Header /> <div className='flex h-screen overflow-hidden'> <div className="md:block h ...

javascript reactjs react-router-dom vite

What is the best way to modify the nested state of a dynamically generated state with the useState hook?

I'm currently facing a challenge when trying to update a nested property of a useState object. Here's the specific scenario: In the component, there is a prop "order" that contains multiple items (line_items) which represent the products in th ...

javascript reactjs react-hooks setstate

Can one utilize Javascript to write in plain text format?

Currently, using JavaScript I have a plain text containing data that is displayed within my form tags. Everything is functioning correctly, but now I need to update the values inside the code of my form tags in order for the changes to also be reflected in ...

javascript jquery html css dns

React's useState and setState functions throw an error when there are multiple instances of a component on the same page

Struggling a bit with some useState hooks and need your expertise to help me figure this out! Here's the gist of what I'm working on... I'm developing a Learning Management System (LMS) webpage where teachers can create courses. The teacher ...

reactjs react-props use-state

Is there a way to divide v-progress linear into 4 pieces in Vuejs, or are there alternative design options for achieving this in Vuetify 2?

I have set up a table in Vuetify 2 with a v-progress-linear component to monitor the user's remaining time. Initially, my implementation was simple like this. https://i.sstatic.net/x373G.png However, we decided to split it into 4 sections for better ...

css typescript vue.js vuetify.js progress-bar

Is there a way to adjust the contents of an iframe to match the dimensions of the iframe itself?

I am trying to adjust the width of an iframe to 60%, regardless of its height. Is there a way to "zoom in" on the contents of the iframe to fit the width, so that I can then set the height based on this zoom level? I haven't been able to find any solu ...

javascript html css iframe

Comparing React's Styled-components, JSS, and Emotion: Which is

As a CTO, I am faced with the decision of choosing between three popular CSS-in-JS libraries: jss emotion styled-component. I will keep this question focused and avoid straying into subjective territory. If necessary, I will answer it myself by asking sp ...

css reactjs styled-components jss emotion

Ways to conceal the scroll bar upon the initial loading of a webpage

Recently, I created a single-page website consisting of 4 sections. The client has specific requirements that need to be fulfilled: The scrollbar should not be visible when the page loads. Once the user starts scrolling past the second section, the scrol ...

javascript jquery html css

Is it possible to have evenly spaced divisions within a fixed wrapper?

I have been experimenting with creating a dynamic navbar that remains at the top of a webpage. Here's what I have so far: <style> .sticky-nav-wrapper > div { color: #000000; display: inline-block; display: -moz-inline-box; * ...

html css

Combining react-datetime with setInterval in a React application

I'm currently utilizing the react-datetime control from the npm package: click here. How can I set an interval in the time picker? For instance, I want it to display times at intervals of 5 minutes (0, 5, 10, 15, etc.). How can I make this happen? Th ...

reactjs datetime npm react-datetime

Incorporating JQuery UI sortable functionality with the CSS grid display property to create a

I'm currently working on creating a sortable CSS grid using jQuery UI. $( function() { $( "#sortable" ).sortable({ handle: "handle" }); }); gridHolder{ display:grid; background:tan; grid-template-columns: ...

jquery css jquery-ui

Tips for choosing the default tab on Bootstrap

I have a question about an issue I am facing with my Angular Bootstrap UI implementation. Here is the code snippet: <div class="container" ng-controller='sCtrl'> <tabset id='tabs'> <tab heading="Title1"> ...

javascript css angularjs twitter-bootstrap angular-ui-bootstrap

Exploring the functionality of the PageIndicator for Wearable Technology

Exploring the Page Indicator within a Tizen Wearable Application for Gear S3 Frontier has been an interesting journey. Despite successful implementation with text content, adding controls to each section or incorporating background images has proven challe ...

html css swipe tizen tizen-web-app

Tips on automatically adjusting the width of a div to fit the content, maintaining center alignment, and ensuring the contents float to the left

I am facing an issue with a div element that has multiple children. My goal is to have the children neatly fit to the bottom left of the grid when the window expands, utilizing the next available space efficiently. However, as the div expands with the wind ...

javascript html css

Discover the magic of DevTools: Easily view real-time SCSS updates without the hassle of constantly saving your changes

The question at hand fails to provide a complete picture of the situation. While I am familiar with Workspaces and SASS source-maps, I can already track the line in the scss file where the specific rule is located that I wish to modify, thanks to the Style ...

css sass google-chrome-devtools

Customizing text appearance with innerHTML in JavaScript: A guide to styling

Below is the code I have for a header: <div id="title-text"> The Cuttlefisher Paradise </div> <div id="choices"> <ul> <li id="home"><a href="#">Home</a></li> <li id="contact">&l ...

javascript html css

Why is it that even though I update the state using useState, when I try to access the state afterwards,

I have been working on a function that updates my states dynamically. Here is the code snippet: const refreshAfterCreate = async () => { try { const res = await fetch(process.env.NEXT_PUBLIC_MICROSERVICE_COMPANY_URL + '/companies&apo ...

reactjs next.js

I'm running into an issue with my React component where it is rendering before the state is set, causing it to fail. Is there a

Is it possible for me to achieve what I've been attempting for the past week? I feel like I'm so close, yet still can't quite reach my goal. Could it be that what I'm trying to do is impossible? I am using reactjs and next js (although ...

javascript arrays reactjs google-cloud-firestore next.js

Ensure that Colorbox remains centrally positioned even while scrolling

I have noticed a difference in behavior between thickbox and colorbox when it comes to scrolling. Thickbox always stays centered on the screen even when the user scrolls vertically, while colorbox fades out and leaves just a grayed background. Is there a w ...

javascript css colorbox

I am experiencing an issue where my React component fails to update properly when viewed in Safari

Everything seemed to be going smoothly. Functioning perfectly in Chrome, FF, Edge, and even IE 11! The main component holds all the state. I send the bets object to the child component which calculates a count to pass to the grandchild component for displ ...

javascript reactjs

CSSer Q&A