Some say that a fixed div is essentially removed from the entire page and maintains a fixed connection to the client window. I believed this was straightforward until I came across the leading answer in this thread. In that scenario, the fixed div's relationship with the window border is not clear to me.
Could someone unravel the mysterious sorcery behind applying relative positioning to fixed divs?
Here are two distinct questions to consider:
position: fixed;.Your explanation of position: fixed; is accurate — the fixed object is removed from the page flow and affixed to the window border. When you provide it with starting coordinates using left/right/top/bottom, they are calculated relative to the window object.
But what happens if you apply position: fixed; without specifying coordinates or only providing coordinates in one dimension?
In such cases, the object's initial position is calculated based on its location prior to being removed from the page flow.
Let's explore some simple examples involving position: absolute; (which behaves similarly to fixed in this context).
You can find the jsFiddle examples here.
Example with position: static;:
`<div>First sentence. <mark>Second sentence.</mark> third sentence. </div>`
In this example, the second sentence remains within the page flow, positioning itself between the first and third sentences.
Example with position: absolute;:
<div>First sentence. <mark style="position: absolute;">Second sentence.</mark> third sentence.</div>
Here, the second sentence is taken out of the page flow without specific coordinates. It is placed after the first sentence (where it was before removal), causing the third sentence to move underneath due to the change in flow.
Example with position: absolute; and; left: 0;`:
<div>First sentence. <mark style="position: absolute; left: 0;">Second sentence.</mark> third sentence.</div>
By adding a starting point with left: 0; for the second sentence, it not only occupies no space but also shifts to the left side of the container while maintaining its vertical position. (No top or right coordinates were added.)
position: fixed; operates similarly. In the original post, the author only fixed the top coordinate, leaving the object horizontally aligned with its original location in the page flow.
I am having an issue on my website where the text is not aligning with the image as desired. The parent container is aligned to the top of the page, but the text seems to be out of line. I would like the text to be in line with the image, similar to a navi ...
I noticed that my CSS Rounded Corners and Shadow work perfectly fine when I debug in Visual Studio using Chrome. However, when I upload it to a server and try to access it through Chrome or IE, the shadow and rounded corners do not display. Is there someth ...
I have designed an angular circular progress bar, but I am facing an issue with making the percentage value dynamic. I have managed to retrieve the dynamic value from an API, but I am unsure of how to implement it in creating a circular progress bar using ...
When working in Angular, I am attempting to apply different style attributes based on varying conditions. However, the typical conditional expression method is limited to just two conditions and is not providing the desired results. <div ng-style=" ...
Currently, I am trying to determine whether a specific CSS class is being used within the DOM. To do this, I've utilized the following code snippet: var x = document.getElementsByClassName('classname'); Upon inspecting the output of variab ...
Can you explain the variations between AppBar and Toolbar in MUI? I know that AppBar defaults to 'column' flex direction, while Toolbar defaults to 'row'. Are there any other distinctions? Additionally, why do MUI docs show examples of ...
I am facing an issue with my chart.js code where I am trying to remove both the axis lines from the graph but still display the grids (NOTE) ` const MAINCHARTCANVAS = document.querySelector(".main-chart") new Chart(MAINCHARTCANVAS, { type: 'line&apo ...
I've inserted a tall video into this bootstrap carousel. The video on the second slide is not a standard bootstrap size - it's 4x5. To address this, I used custom code: class="vidbox embed-responsive embed-responsive-4by5" /* Cust ...
I need help with styling a contact form that consists of 4 text input fields and 1 text area. Here is the current code for the contact form: <form class="contact_form"> <input type="text" placeholder="Name"> <input type="text" plac ...
There are 3 divs in the example below: https://i.sstatic.net/ouN6V.png <ul> <div class="parent"> <li> <div> Lorem Ipsum is simply dummy </div> </li> </div> <li> <div class="parent"> <div& ...
Why does each word in a child element (class .second) get wrapped onto a new line when using absolute positioning? Is there a way to keep the parent element (class .first) as a round shape, while also ensuring the child element is centered below it and has ...
So I have this unique HTML element that showcases a large headline with two decorative lines on either side, extending to the full width of the element. However, I now have a requirement to display some text as a background behind this element. The issue ...
Is it possible to combine two text boxes in a form using CSS, similar to the design on Tumblr's login page at ? If CSS is not the solution, what alternative methods can be used? Any assistance would be greatly appreciated. I am aiming to enhance the ...
Apologies for my limited English proficiency. I am currently working on creating a horizontal scrollable table in HTML. My goal is to make the width of the table span beyond the browser's viewing area, so that sticky cell functionality can be implem ...
My problem lies in creating a responsive navbar using bootstrap. On smaller screens, the toggler in the navbar ends up overlapping the logo instead of aligning to the left. I've attempted to add containers around the elements to fix this issue but to ...
Looking for some help with a fixed header issue on my website. The header is supposed to stay at the top while scrolling, which works well. However, when I switch to responsive view, click the menu button, and then go back to desktop view, none of the po ...
On larger screens, I am trying to align text vertically next to an image. Below is the code and attached image for reference: <div class="container-fluid"> <?php add_revslider('homepage'); ?> <div id="front-page-1&q ...
I am working with a Bootstrap nav-bar that collapses into a button by default. Within my nav-bar, I have opted for images instead of text links. However, when the nav-bar is collapsed, I would like these images to be smaller in size. Is there a way to cu ...
I am currently using Bootstrap 4 to craft a navigation menu. Each navigation item features a dropdown menu that I want to display centered horizontally on the page, with the same size as the ul element. However, due to my limited experience with Bootstrap, ...
I am working on a website that is structured into different sections using divs with shared classes but unique IDs. Each div is set to take up 100% of the viewport height. To navigate between these sections, I want to provide Up/Down arrow buttons for user ...