6,335 questions
3
votes
1
answer
83
views
Why does parent's aspect-ratio break with child's h-full but work with absolute?
I'm building a responsive MacBook screen component using CSS aspect-ratio, but I'm encountering a strange behavior where the aspect ratio gets distorted depending on how I position the inner content.
...
1
vote
1
answer
57
views
Issue with opaque checkbox under element with absolute position
I just want to ask if I understand something wrong.
Here is a Fiddle
<table>
<th style="position: relative; width: 50px; height: 100px">
<div style="position: ...
- 399
-1
votes
1
answer
87
views
CSS stacking: ::before pseudo-element (button) appears above content on hover [duplicate]
On hover, the buttons show a conical gradient background, which I have set to button-class::before to bring that glow effect for each button.
Image
.button-class{
background-color: #0f0f2c;
box-...
- 1
0
votes
2
answers
72
views
SVG masking with static and fixed positioned paths
I have a fixed element at the top of my page, a vector logo. Further down the page, I have a large vector element. They are both the same colour. When the logo passes over the second element, I want ...
-1
votes
3
answers
91
views
Elements stacking abnormal behaviour in CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>...
0
votes
2
answers
85
views
How to set min-bottom when using anchor positioning in CSS?
When using anchor positioning, I want the element to not extend beyond the boundaries of screen (or other container). For example:
document.getElementById("flyout2").innerText += " long".repeat(100);
....
- 181
0
votes
0
answers
32
views
position: sticky CSS doesn't work - simple example [duplicate]
Position: sticky CSS doesn't work in this simplified example. What's wrong with it?
.container {
position: sticky;
top: 20px;
z-index: 10000;
padding: 10px;
background-color: green;...
- 9,358
1
vote
4
answers
144
views
Concentric rings (similar to a radar) using CSS
I'm doing a flask battleship game. Started with the visuals, and have this HTML/CSS structure:
:root {
background-color: black;
}
.boards-container {
display: flex;
justify-content: space-...
- 93
1
vote
1
answer
28
views
How can I make one image spill out and the other clipped into a div?
This Image contains a div with two images, one for the background (the circles) and one for the content (the two phones (one image)). Can you suggest a way to make the phones spill out of the div ...
- 13
0
votes
2
answers
109
views
HTML Element not sticking even after applying "position : sticky" and adding a "top" value
I have provided a picture in this post and as you can see there is a box where text is written "I am sticky".So initially when i applied the "position:sticky" with "top:0"...
0
votes
0
answers
58
views
Removing Image Overflow in CSS
I'm trying to make the header for the website for my personal project. However, the image is overflowing out of its' container and I don't know how I can fix it.
I've tried using overflow: hidden , ...
0
votes
1
answer
124
views
How to keep page content horizontally centered when sidebar expands/collapses in Next.js layout?
I have a Next.js application with a collapsible sidebar and a shared layout. When the sidebar expands or collapses, I want the main content of my pages to always remain horizontally centered within ...
- 35
0
votes
0
answers
46
views
Why does `position: absolute` not stick to the bottom of the viewport when no positioned ancestor exists? [duplicate]
I'm experimenting with CSS positioning and noticed something confusing.
I have the following setup:
.box3 {
background-color: #9C27B0;
width: 100px;
height: 100px;
position: absolute;
bottom:...
- 15.9k
0
votes
2
answers
82
views
how do i make an element appear the same on all resolutions?
the element labelled "gib" is supposed to sit at the corner of the white container, and does so on my screen (at 1920 x 1080) but at other resolution, the element goes off to the left of the ...
- 13
5
votes
2
answers
479
views
How can I make a child element escape a parent with overflow: hidden without breaking my layout?
I’m working on a layout where the parent element has the following properties:
.parent {
position: relative;
height: 350px;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
...
- 53
2
votes
3
answers
92
views
Absolute checkbox in overflow container breaks render when being checked
I feel as though I'm being pranked. I'm running into an issue that is replica table in both Chrome and FireFox and I cannot understand why it's happening.
I have a "pseudo" checkbox setup I'...
- 1,283
0
votes
0
answers
39
views
Why does the vertical scrolling stops at certain points both when the sub menu is collapsed and expanded?
I have a side bar menu that stops scrolling when it reaches the "categories" item on the list, thereby not allowing the user to get to the other items on the list in side bar menu. Although ...
-1
votes
1
answer
46
views
How can I make sure my image does not clutter with rest of the content? [closed]
I have the below code for a page that has a footer which is absolutely positioned to the bottom left of the main container. I have kept it as absolute for different resolutions to show the image on ...
- 47
-1
votes
2
answers
71
views
Fixed div hides elements with higher z-index
I want to show a mobile menu that is displayed full screen and hides all the content except the page logo and hamburger menu icon. The following is my test code, note that it also hides the page logo ...
- 18.5k
0
votes
0
answers
133
views
Fixing Header with JavaScript After Scrolling Past 100vh Header:
I am trying to make a header that stays fixed when I scroll down, but it only goes until the end of the header, which is set to 100vh. Does anyone have any idea how I can solve this without stopping ...
- 1
-1
votes
2
answers
83
views
CSS/JS Website working perfectly fine on desktop but not working correctly on mobile
I made a simple website where i wanted to hide and show div using js
everything works fine on desktop, even when the window is reduced
But when i try it on mobile the navigation bar start to work in ...
0
votes
1
answer
30
views
Centering slider navigation arrows according to the image not parent container
How can I center slider navigation buttons based on the images inside each slide instead of the parent container? I have a slider section displaying products with names and prices. The prev/next ...
- 658
0
votes
1
answer
70
views
Why does a parent element disappears when its child element is set to `position: absolute`?
* {
margin: 0px;
padding: 0px;
font-family: "Poppins", sans-serif;
}
.main_box{
background-image: url(images/photo.jpg);
background-size: cover;
height: 100vh;
}
.btn_one{
...
- 45
0
votes
1
answer
108
views
How to use CSS anchor-position to attach children to his parent
I have the following HTML structure:
<button id="button-1">
Button content
<span class="tooltip">Tooltip</span>
</button>
I want to position the ....
- 8,449
0
votes
2
answers
96
views
Scrolling down on a sticky header menu on mobile
I want to create a standard header bar for my website. That header should always be displayed on top of the window regardless of how far I scroll down on the page. I used position:sticky. So, pretty ...
- 13
-1
votes
1
answer
346
views
position-anchor not working when the anchor is position:fixed
I'm trying to align a to the bottom-right corner of an element using the CSS Anchor Positioning
#sidebar {
anchor-name: --sidebar;
height: 100vh;
width: max-content;
position: fixed; /* ...
- 8,449
1
vote
1
answer
40
views
sidebar navigation sticky position move little upwards at end of scroll why?
I created a sidebar div and a main content div. The main content contains a large amount of text, making the page scrollable. I want the sidebar to remain sticky while scrolling the page. I achieved ...
1
vote
2
answers
127
views
Position a div element relative to its previous sibling (piano keyboard styling)
I'm developing a piano keyboard using HTML + CSS.
My code structure is as follows:
:root {
--piano-width: 600px;
--piano-height: 150px;
--piano-keys-gap: 1px;
--piano-black-keys-height-...
- 91
1
vote
2
answers
78
views
How to align metadata (time and icon) in a chat bubble layout when text is short?
How it should look "the correct version"
How it looks, "the incorrect version"
The metadata looks ok when the text is long, however, when the text is short for example, the user ...
- 21
0
votes
3
answers
94
views
Display: flex interfers with .hidden class > collapsible div is visible even though it shouldn't
I have a main page and on this page there is "Add question" button, and if clicked the expected behaviour should be that a collapsible div will appear on the top of the page and also an ...
- 15
3
votes
3
answers
166
views
div with position: absolute gets the wrong width from the child image, in Firefox only
.div1 {
position: relative;
padding-bottom: 25%;
background: lightcoral;
}
.img-container {
position: absolute;
height: 100%;
background: green;
}
.img1 {
height: 100%;
opacity: 50%;
...
- 33
3
votes
1
answer
1k
views
safe-area-inset-bottom on iOS18
It seems the latest version of safari on the newly updated iOS (only a few weeks old as of this post) has a bug relating to safe-area-inset-bottom. A fixed bottom nav displays fine, and adjusts on ...
- 121
0
votes
0
answers
90
views
An element with position set to fixed in CSS extends beyond the bottom of the browser
An element with position: fixed; and bottom: 0; set extends beyond the bottom of the browser.
Setting height: 100%; and overflow: auto; for html and body solves the problem, but is there any other way?...
1
vote
1
answer
77
views
How to stop image overlapping text with relative position
I have placed an image towards the top of the page and to the right of some text, but when I resize the browser the image (composting-machine) overlaps the H1 text, even though it doesn't overlap the ...
- 11
0
votes
1
answer
81
views
Elements are hidden inside the scrolled block area
I found a behavior that when we use overflow to scroll content and try to change sub elements' horizontal position, the width of the root block increases, and we can see the changed sub element only ...
0
votes
2
answers
66
views
How to position rounded end borders correctly on a circular graph using only CSS? [duplicate]
I'm trying to create a circular graph using only CSS and HTML, where each segment has a border with rounded ends at both the start and end. However, I'm struggling with positioning the ::before and ::...
- 3
1
vote
4
answers
189
views
Position: relative; right: 0; Doesn't seem to position although the parent is also relative
I'm trying to get the nav to position to the left as relative. I've been encountering this issue quite a lot and can't get my head around it.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
...
- 17
0
votes
1
answer
54
views
CSS fixed element to not overflow parent
I have a full page of content (.page-content) with a sticky footer at the bottom. I need a vertical separator (the white line) that takes 100% of the .page-content height. This works.
I also need a ...
- 22.5k
2
votes
1
answer
149
views
How to overlay two images?
So I am trying to have one image overlay another like the image. The screenshot image is how I wish the images to be placed. Screenshot of an image overlaying another
However whenever the screen ...
- 23
0
votes
1
answer
129
views
How to set absolute element inside display grid correctly?
I have below code snippet, what I want to achieve is that .child which is panel should not be shown, to the top of .content class, however, .child is setting at top of .data class. I don't understand ...
- 2,425
2
votes
0
answers
31
views
Why does filter: invert(100%) interfere with position: fixed? [duplicate]
The following snippet contains a text that is fixed to the canvas and therefore does not overlap the main body text (which is offset by the paragraph margin).
But if I use a filter: invert(100%) CSS ...
- 18.2k
-1
votes
1
answer
97
views
How can I fix an HTML object in place when scrolling right, but allow it to disappear from view when scrolling down?
I have a webpage with a header bar across the top. When the content of my page is too wide (typically caused by an embedded object) I would like the header bar across the top to still display across ...
0
votes
0
answers
38
views
Allow child element to render outside of parent's bounds while still respecting parent's scroll
I have a child element in a scrollable parent.
I want the child to move as the parent is scrolled. I can do this if I position the child relative to the parent.
But I also want the child to show even ...
- 11.7k
2
votes
3
answers
162
views
Position SVG <text> in identical position as HTML <div> with text inside
I am trying to position a svg with text in exactly the same position as div with text, no matter the font family used or font size
The problem comes with the first element being offset in x and y ...
- 255
0
votes
2
answers
95
views
How to position buttons and all on webpage perfectly?
so i want to swap them with their position any help?? Also some good video or reference with respect to this positioning thing because it is very confusing for me
i tried to position relative then ...
0
votes
2
answers
68
views
How can I ensure that the container is at least as wide as the longest text and that the entire text is visible?
I have a navigation dropdown menu within a container. The HTML and CSS code provided is meant to display a language dropdown menu. However, I'm experiencing issues where the container's width doesn't ...
- 715
0
votes
1
answer
45
views
border-radius not applying to container element
I'm having trouble with applying border-radius to a container element in my CSS. Despite setting the border-radius property, it doesn't seem to be taking effect.
Here's my code:
* {
padding: 0;
...
- 715
-1
votes
2
answers
101
views
Why are logos not inline with each other?
So i have a list of client logos, and i used one of tailwinds components to list them on my website, it should have made everything inline, but for some reason the logos aren't. Even though they are ...
- 39
0
votes
2
answers
75
views
Why Doesn't My Header Div Stay Centered When I Scroll The Image?
I am trying to center my header div. It works most of the time. However, once I make the screen window width smaller than the image and scroll the the right side of the image, the header div begins to ...
- 19
-1
votes
2
answers
76
views
Wrapping an absolutely positioned span after a relatively positioned one
I have a parent container who has two children, like so:
<div class='parent'>
<span id='Span1' style='position: relative'>Some content that is fixed</span>
<span id='Span2'&...
- 47