6,331 questions
Score of 1
2 answers
116 views
How to change the position of a gif? [closed]
I can't seem to change the position of an animated gif. I've tried different types of positioning, using a div vs just adding a class to the image, and I can't get it to work. I am trying to get my ...
- reputation score 21
Score of 9
1 answer
256 views
Non-sticky div inside sticky div
I have a component on my website that looks somewhat like this:
body {
color: #fff;
font-family: arial;
font-weight: bold;
font-size: 40px;
}
.main-container {
max-width: 600px;
margin: 0 ...
- reputation score 3251
Score of 0
2 answers
106 views
How to contain a label into its preceeding expanded element, without using a wrapper container?
Given a small colored box followed by a label name tag to it. Like so:
Once mouse hovering the small colored box, the box should expand to full width and the label text should get positioned inside ...
- reputation score 15597
Score of 1
1 answer
117 views
The Working Principle of CSS Negative Margins
I want to understand how CSS negative margins work in the box model, but the official documentation is difficult for me to follow. Below, I use an example to illustrate my confusion.
Why can negative ...
- reputation score 43
Score of 0
0 answers
50 views
Chrome only: absolutely positioned floating label shifts/overflows differently when clicking label text vs input
I’m building a floating label input using Tailwind/React. The floating label is an absolutely positioned <span> inside a <label>, and it uses :has(+ input:is(:focus,:not(:placeholder-shown)...
- reputation score 87
Score of 3
1 answer
109 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.
...
- reputation score 65
Score of 1
1 answer
64 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: ...
- reputation score 399
Score of -1
1 answer
105 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-...
- reputation score 1
Score of 0
2 answers
96 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 ...
- reputation score 1
Score of -1
3 answers
99 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>...
- reputation score 33
Score of 0
2 answers
113 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);
....
- reputation score 191
Score of 1
4 answers
221 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-...
- reputation score 93
Score of 1
1 answer
32 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 ...
- reputation score 13
Score of 0
3 answers
145 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"...
- reputation score 33
Score of 0
0 answers
74 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 , ...
- reputation score 1