css-position 相关问题

动画酒吧身体 { 背景颜色：黑色； /* 设置 </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>

html css css-position

回答 0 投票 0

如何在移动浏览器中启用CSS位置：粘性？

在我的网页上添加了一些位置：粘性属性。在桌面浏览器上工作正常，但在移动设备上却很糟糕。

css css-position mobile-browser

回答 2 投票 0

如何创建来自右上角的响应式发光？

我试图在CSS中从右上角发出光芒，类似于这样：我尝试使用 filter:blur() 制作一个 div 并将其定位为绝对，但这会导致问题......

css position css-position glow

回答 1 投票 0

移动模式下的溢出、固定、粘性元素问题

问题：我的布局面临一个问题，涉及移动模式下的溢出、固定和粘性元素。这是场景：我的内容以表格形式呈现，第一个表格需要有...

css overflow css-position

回答 1 投票 0

如何让我的粘性 div 保持卡住状态？

我的网页有 3 个 div。我已经将第二个 div 设置为粘性的。我的期望是，当我滚动 div1 时，它会滚动到顶部，div2 到达顶部时会粘住，然后 div3 会滚动到顶部...

javascript html css css-position sticky

回答 1 投票 0

我的位置粘性在我的代码中不起作用。我将其设置为左侧，但什么也没发生

我目前正在学习 Bootstrap、HTML 和 CSS，但遇到了这个错误。我希望我的侧边栏具有粘性，但它似乎不起作用并粘在左侧。我尝试了位置粘性并设置为 left:0 但是

html css css-position bootstrap-5

回答 1 投票 0

如何更改html文本的位置？

我是网络开发新手。这是我的 html 代码： {错误} 输入您的电话号码：我是网络开发新手。这是我的 html 代码： <html> <body> {errors} <p>Enter your numbers:</p> <form method="post" action="."> <p><input name="number1" /></p> <p><input name="number2" /></p> <p><input type="submit" value="Do calculation" /></p> </form> </body> </html> 您可以在下面看到它的外观：如何更改位置、字体和大小？它目前显示在左上角。在 Web 开发中，任何时候需要设置页面元素的样式时，都需要使用 CSS。如果您想了解更多信息，请查看w3school。在本例中，我将向您展示如何应用内部样式，但您也可以将 CSS 与外部或内联样式一起应用 - 请参阅 here 了解相关说明。 <html> <head> <style> body { font-family: 'Calibri', 'sans-serif'; font-size: 16px; font-weight: bold; text-align:center; } form { position: relative; bottom: 0; right: 0; } </style> </head> <body> {errors} <p>Enter your numbers:</p> <form method="post" action="."> <p><input name="number1" /></p> <p><input name="number2" /></p> <p><input type="submit" value="Do calculation" /></p> </form> </body> </html> 所以在这里，我给了你一个如何使用的例子： font-family - 用于更改字体类型 font-size - 更改字体大小 font-weight - 更改字体的粗细位置 - 用于通过将元素与顶部、左侧、右侧和底部属性相结合来以不同方式定位元素请参阅此处了解有关 CSS 字体样式的更多信息请参阅此处了解有关 CSS 定位的更多信息

html css css-position webfonts

回答 1 投票 0

firefox绝对定位重叠

我在 Firefox 中无法正确渲染此内容。它在 chrome 和 safari 中渲染得很好。我在 Firefox 中无法正确渲染此内容。它在 chrome 和 safari 中渲染得很好。 <div style="" id="login_inline"> <form accept-charset="utf-8" action="/users/login" method="post" id="UserLoginForm"> <div style="display:none;"> <input type="hidden" value="POST" name="_method"> </div> <input type="text" id="UserDummyEmail" tabindex="1" value="Email" name="data[User][dummyEmail]" style="display: block;"> <input type="text" id="UserDummyPassword" tabindex="2" value="Password" name="data[User][dummyPassword]" style="display: block;"> <input type="text" id="UserEmail" maxlength="255" tabindex="3" name="data[User][email]"> <input type="password" id="UserPassword" tabindex="4" name="data[User][password]"> <div class="submit"> <input type="submit" value="Login"> </div> </form> </div> CSS： #login_inline { position:absolute; right:10px; top:30px; width:420px; } .submit { display:inline; position:absolute; left:360px; } #UserPassword { position:absolute; left: 185px; } #UserDummyPassword { position:absolute; left:185px; z-index:1; color:gray; } #UserDummyEmail { position:absolute; left:10px; z-index:1; color:gray; } #UserEmail { position:absolute; left:10px; } Firefox 渲染： Chrome 渲染：编辑：现场示例（正确渲染）通过绝对定位，您将依赖于输入元素的正确宽度。这在跨浏览器中很难做到，因为浏览器倾向于使用样式不一致的自定义或本机元素。您最好使用内联块或浮动布局来处理不一致的宽度。如果你真的必须这样做，有一些黑客使用 css3 box-sizing 属性和/或手动调整属性，如行高、字体大小和填充，以使所有浏览器就输入大小达成一致，但这比听起来更难. 这个问题有一些关于 box-sizing 的信息，并使用百分比/自动宽度来获得一致性：带有显示的输入：块不是块，为什么不呢？编辑：根据上面的评论，您可能需要设置一些 div 包装器来设置隐藏元素和可见元素的大小/位置，然后使用百分比宽度和 box-sizing，如所解释的。 <div class="input_wrapper" style="width:100px;position:relative"> <input style="width:100%;box-sizing:border-box;position:absolute"> <div class="fake_input" style="width:100%;position:absolute"> </div> 这一切的关键是box-sizing:border-box不太容易受到浏览器在表单输入的填充和边框计算方面的差异的影响。我发现通常最好在输入字段上设置字体大小，这将使它们的大小（更）一致

css firefox google-chrome stylesheet css-position

回答 2 投票 0

理解CSS中的相对位置[重复]

点击此链接。它指出：位置为：relative 的元素；相对于其正常位置定位。我们如何定义“正常位置”？是在父元素的上下文中还是 ov...

css css-position

回答 4 投票 0

在悬停可滚动项目上显示工具提示

我在向垂直导航列表显示工具提示时遇到问题。这是我的问题的示例：https://codepen.io/achillebourgault/pen/ZEVVbGe?editors=1100 基本上，我有一个父 div .l...

html css css-position

回答 1 投票 0

移动设备上的绝对位置与固定位置

我有以下 HTML 片段： .父级{ 高度：100vh；位置：相对；背景：中海绿； } 。孩子 { 位置：绝对；底部：0；左：0；宽度：100%；回来...