6,335 questions
3 votes
1 answer
76 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
79 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
138 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
119 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
81 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
475 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