css-position 相关问题

的想法是让一个元素作为模式对话框打开，并在打开时从右侧滑入。以下是我想出的最小示例：这个想法是让一个 <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>

html css modal-dialog css-animations css-position

回答 1 投票 0

为什么当鼠标悬停在“位置：固定”元素上时，滚轮滚动事件不会触发？

这是我的问题的一个简单测试用例： http://jsfiddle.net/JZmvf/20/ 将鼠标放在红色方块上用鼠标滚轮滚动父div不滚动如何使父div正常

css scroll css-position mousewheel

回答 3 投票 0

在 TextInput 中创建一个下拉列表以选择（先生、夫人、小姐）。造型是主要问题。（反应原生纸）

我正在使用react-native-paper，这是一个很棒的库，但是当我需要一个下拉菜单时遇到了一个问题，该菜单覆盖在它周围的TextInput字段上。不想使用任何图书馆，除非......

react-native dropdown css-position react-native-paper react-native-stylesheet

回答 1 投票 0

如何修复顶部的导航栏而不被破坏？

我正在使用 React 和 Tailwind CSS 开发一个作品集网站。当我设计导航栏时，我想要在它上面有悬停效果，所以我从这个 codepen 复制了悬停效果：用于悬停效果的 codepen ...