CSS中的“position”属性允许您通过将其值设置为static（默认设置），relative，absolute，fixed或sticky来控制页面上元素的位置。
的想法是让一个 元素作为模式对话框打开，并在打开时从右侧滑入。以下是我想出的最小示例： 这个想法是让一个 <dialog> 元素作为模式对话框打开，并在打开时从右侧滑入。以下是我想出的最小示例： <button type="button" onclick="document.querySelector('.slide-in').show()">open</button> <dialog class="slide-in"> <form method="dialog"><button>close</button></form> </dialog> <style> .slide-in { left: auto; right: -200px; } .slide-in[open] { animation-name: slide-in; animation-duration: .5s; animation-iteration-count: 1; right: 0; } @keyframes slide-in { from { right: -200px; } to { right: 0; } } </style> 但是由于某种原因，当对话框打开时，它保持在屏幕的右侧，而整个主体从左侧移入。 演示：https://jsbin.com/sominizona/edit?html,css,output 我认为这与顶层概念有关，但我对如何更改以使对话框移动而不是文档的整个其余部分有点不知所措。 您不需要任何初始定位样式，只需使用 translateX @keyframes slide-in { 0%{ transform: translateX(100%) } } .slide-in { margin-right: 0; position: fixed; inset: 0; } .slide-in[open] { animation-name: slide-in; animation-duration: .5s; animation-iteration-count: 1; } @keyframes slide-in { 0%{ transform: translateX(100%) } } /*@keyframes slide-in { from { right: -200px; } to { right: 0; } }*/ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor, erat vel pharetra vulputate, neque justo euismod justo, vel tristique nibh sapien a felis. Sed laoreet, lorem quis gravida sollicitudin, enim est pharetra enim, ut accumsan metus lacus a quam. Morbi faucibus quam et metus sagittis malesuada. Vivamus consectetur odio sed suscipit malesuada. Duis urna quam, pharetra id eleifend in, rhoncus id nisi. Donec sit amet porta velit. Donec pellentesque purus eget libero tincidunt, sit amet aliquet purus sagittis. Quisque in leo at leo lacinia bibendum a semper ligula.</p> <p>Click the button below. A modal dialog opens. It should slide in from the right. Instead the body slides in from the left, while the dialog stays put.</p> <div class="container"> <button type="button" onclick="document.querySelector('.slide-in').show()">open</button> <dialog class="slide-in"> <form class="inner" method="dialog"><button>close</button></form> </dialog> </div> </body> </html>
为什么当鼠标悬停在“位置：固定”元素上时，滚轮滚动事件不会触发？
这是我的问题的一个简单测试用例： http://jsfiddle.net/JZmvf/20/ 将鼠标放在红色方块上 用鼠标滚轮滚动 父div不滚动 如何使父div正常
在 TextInput 中创建一个下拉列表以选择（先生、夫人、小姐）。造型是主要问题。 （反应原生纸）
我正在使用react-native-paper，这是一个很棒的库，但是当我需要一个下拉菜单时遇到了一个问题，该菜单覆盖在它周围的TextInput字段上。 不想使用任何图书馆，除非......
我正在使用 React 和 Tailwind CSS 开发一个作品集网站。当我设计导航栏时，我想要在它上面有悬停效果，所以我从这个 codepen 复制了悬停效果： 用于悬停效果的 codepen ...
使用 CSS 动画的水平滚动 - 使用粘性位置进行翻译无法按预期工作
我使用CSS动画创建了一个具有无限水平滚动的小提琴，我希望列表中的第一个元素是粘性的。 在 @keyframes 中使用 left 属性时，它可以按预期工作
我有一个div（绝对容器），它绝对定位到静态定位的父级。我的目标是使绝对容器具有设置浏览器的高度，最大高度约为 600px。这是cu...
为什么子类child1（绝对位置）的元素在父元素类overflowTest（相对位置，溢出滚动）滚动时没有停留在预期位置。 我是什么屁股...
我正在尝试使用背景滤镜制作具有玻璃效果的工具提示：模糊，但该滤镜似乎不适用于绝对位置的元素。 我想这是因为该项目...
需要使用position:fixed，但仍然需要流中的元素。怎么办？
场景： 在 HTML 中，我有 2 个元素（顶栏和图像）。顶部栏必须是 在位置：固定（这会破坏流程，我明白）。和 第二个元素有 margin-top 来下推
我目前正在开发一个项目，尝试调整侧边栏中元素的位置。侧边栏包含 Font Awesome 图标和相应的文本元素，我正在尝试...
如何使用 Tailwind 以响应方式将 SVG 绝对定位在图像后面？
我正在尝试定位 SVG，如图所示。调整屏幕大小时，SVG 应保留在原来的位置。这是我尝试之前的游乐场链接。 我尝试创建一个包装 div...
假设我有一个元素，它在视觉上是容器的一部分。该容器的高度可能非常长。 现在，当用户向下滚动时，我想将此元素放置在
当我将其上方的 div 更改为固定时，如何阻止继承定位的元素跳转页面？
好吧，当您滚动经过横幅底部（页面向下大约 200 像素）时，我有一个页面使用 javascript 将标题固定到页面顶部（从而删除横幅）。 在这个网站上...
我试图使主页标题元素即使滚动也能固定在适当的位置。但我希望标题元素固定在宽度的该部分内。我的意思是仅在中间部分。但这是
我看到很多帖子都面临div添加position:fixed在手机浏览器上仍然移动的问题，通过设置viewportminimum-scale=1.0解决了。 （经过一些测试，我认为它可以通过设置来修复
是否可以在纯 CSS 中将多个粘性元素堆叠在一起？ 可以在这里看到所需的行为： https://webthemez.com/demo/sticky-multi-header-scroll/index.html 哦...
我试图使用 ::before 选择器设置背景图像，并且使用绝对位置，但是当我在浏览器中检查相同位置时，它显示位置为绝对位置，但我无法...
动画酒吧 身体 { 背景颜色：黑色； /* 设置 </desc> 的背景颜色 <question vote="0"> <pre><code><!DOCTYPE html> <html> <head> <title>Animated Bars</title> <style> body { background-color: black; /* Sets the background color of the entire page to black. */ } #bars { position: absolute; /* Positions the element absolutely within its containing element. */ top: 0; /* Positions the element vertically at the center of its parent. */ bottom: 10; height: 14px; /* Sets the height of the element to 14 pixels. */ transform: scale(2) translateX(-5%) translateY(0%); /* Applies a scaling and translation transform to the element. */ } .bar { position: absolute; /* Positions the element absolutely within its containing element. */ bottom: 0px; /* Positions the element at the bottom of its parent. */ height: 3px; /* Sets the height of the element to 3 pixels. */ width: 1px; /* Sets the width of the element to 1 pixel. */ background: white; /* Sets the background color of the element to white. */ animation: sound 0ms -1000ms linear infinite alternate; /* Defines the animation for the element. */ transform: translateY(50%) TranslateX(50%); /* Applies a translation transform to the element. */ } @keyframes sound { 0% { opacity: .80; /* Sets the opacity of the element at the start of the animation. */ height: 20px; /* Sets the height of the element at the start of the animation. */ } 100% { opacity: 1; /* Sets the opacity of the element at the end of the animation. */ height: 75px; /* Sets the height of the element at the end of the animation. */ } } </style> </head> <body> <div id="bars"></div> /* Creates a container with the id "bars" to hold the animated bars. */ <script> function randomColor() { const letters = '0123456789ABCDEF'; /* Defines a set of characters for creating random colors. */ let color = '#'; /* Initializes a color with a hash symbol. */ for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; /* Generates a random color. */ } return color; /* Returns the generated color. */ } for (let i = 0; i < 600; i++) { const left = (i * 2) + 1; /* Calculates the left position of each bar. */ const anim = Math.floor(Math.random() * 75 + 400); /* Generates a random animation duration. */ const height = Math.floor(Math.random() * 25 + 3); /* Generates a random bar height. */ // Calculate a gradient color based on the position of the bar const color = `hsl(${(i / 90) * 360}, 100%, 50%)`; /* Calculates a gradient color. */ const bar = document.createElement('div'); /* Creates a new div element for a bar. */ bar.className = 'bar'; /* Assigns the "bar" class to the div element. */ bar.style.left = left + 'px'; /* Sets the left position of the bar. */ bar.style.animationDuration = anim + 'ms'; /* Sets the animation duration for the bar. */ bar.style.height = height + 'px'; /* Sets the height of the bar. */ bar.style.background = color; /* Sets the background color of the bar. */ document.querySelector('#bars').appendChild(bar); /* Appends the bar to the "bars" container. */ } </script> </body> </html> </code></pre> <p>我对 html、css 和 js 相当陌生。我正在制作一个网站，我希望出现这个声波。我找到了声波，并根据我的喜好对其进行了一些更改，但我无法让它适合屏幕。我发现的唯一方法是将 #bars 定位设置为固定，但显然当我滚动时它会保持不变。我尝试过改变一切，将一切居中，使用 vh 和 vw 但似乎没有任何效果。在 ChatGPT 和 blackbox 的帮助下，我现在理解了代码，但仍然无法使其适合。有人可以帮助我使其适合每个屏幕尺寸并解释我错过了什么吗？.</p> <p>我希望它适合每个屏幕尺寸，而不是向左扩展并使窗口大于屏幕。</p> </question> <answer tick="false" vote="0"> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!DOCTYPE html> <html> <head> <title>Animated Bars</title> <style> body { margin: 0; padding: 0; /* Clear the default margin and padding */ width: 100%; /* Set the width of body to full viewport */ background-color: #181A1D; /* Sets the background color of the entire page to black. */ } #bars { outline: 2px solid #EFF8; /* Gives an outline to the element */ outline-offset: -3px; /* Offset from the original position of outline */ height: 90px; /* Height of the container */ width: 100%; /* Width full to viewport */ display: flex; /* Makes the container a flexbox */ flex-direction: row; /* Sets the direction of items in the flexbox */ align-items: center; /* Align the items in center on vertical axis of container (flexbox) */ justify-content: center; /* Align the items in center horizontal axis of container (flexbox) */ overflow: hidden; /* Hides any element inside it which does not fit inside it */ padding: 22px 0; /* Gives padding in the x axis. this is to make sure that bars that scale up more than the height of the parent do not get hidden */ } .bar { width: 2px; margin: 0 0.5px; /* vertical and horizontal axis margin from other elements */ height: 50%; /* Height (% means relative to its parent height) */ background-color: #FFF; border-radius: 5px; /* Makes the corners of the element round (takes the radius of the roundness) */ animation: sound 0ms -1000ms linear infinite alternate; } @keyframes sound { 0% { opacity: .75; /* Sets the opacity of the element at the start of the animation. */ scale: 1 0.5; /* Scales the element from its original size (in this condition height) to specified value (1 means 100% and 0 means 0%) */ /* first value determines scaling in X or horizontal axis and second one in Y axis */ } 100% { opacity: 1; /* Sets the opacity of the element at the end of the animation. */ scale: 1.2 2; /* scaling width to 1.2 times and height to 2 times */ } } </style> </head> <body> <div id="bars"></div> /* Creates a container with the id "bars" to hold the animated bars. */ <script> function randomColor() { const letters = '0123456789ABCDEF'; /* Defines a set of characters for creating random colors. */ let color = '#'; /* Initializes a color with a hash symbol. */ for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; /* Generates a random color. */ } return color; /* Returns the generated color. */ } for (let i = 0; i < 500; i++) { const anim = Math.floor(Math.random() * 75 + 400); /* Generates a random animation duration. */ const height = Math.floor(Math.random() * 50); /* Generates a random bar height. */ // Calculate a gradient color based on the position of the bar const color = `hsl(${(i / 90) * 360}, 100%, 50%)`; /* Calculates a gradient color. */ const bar = document.createElement('div'); /* Creates a new div element for a bar. */ bar.className = 'bar'; /* Assigns the "bar" class to the div element. */ bar.style.animationDuration = anim + 'ms'; /* Sets the animation duration for the bar. */ bar.style.animationDelay = (Math.random() * anim) + 'ms'; /* Sets the animation delay for the bar. */ bar.style.height = height + '%'; /* Sets the height of the bar. */ bar.style.background = color; /* Sets the background color of the bar. */ document.querySelector('#bars').appendChild(bar); /* Appends the bar to the "bars" container. */ } </script> </body> </html></code></pre> </div> </div> <p></p> <p>对样式进行了一些更改 我添加了适当的评论来澄清事情</p> <p>与其将所有条形绝对定位，不如将它们放入弹性盒中并将它们全部对齐成一行。 与其对高度进行动画处理，不如更改条形的比例。 缩放比改变高度更能提高性能。</p> <p>//希望有帮助</p> </answer> </body></html>
在我的网页上添加了一些位置：粘性属性。在桌面浏览器上工作正常，但在移动设备上却很糟糕。
我试图在CSS中从右上角发出光芒，类似于这样： 我尝试使用 filter:blur() 制作一个 div 并将其定位为绝对，但这会导致问题......