css-position 相关问题

我刚刚使用了 bigspotteddog 的 ScrollToFixed 插件（https://github.com/bigspotteddog/ScrollToFixed）在我的网站上（http://faiththeagency.com/easyphone/frequently-asked-questions.php...

jquery css-position scrolltop

回答 2 投票 0

父元素固定位置div行为的宽度

我发现了这种奇怪的现象，有人肯定可以帮助我更好地理解。我有一个包含其他 div 的父 div.container 。第一个 div.background-div 有一个固定的

html css css-position

回答 1 投票 0

当用户滚动到页面顶部时重新定位导航栏（jQuery）

我的网站上有一个问题，当用户滚动到页面顶部时，我的替代导航栏（在主导航栏下方）在页面上的位置太高，位于主导航栏后面。主要...

javascript html jquery css-position navbar

回答 1 投票 0

CSS 位置粘性和 Z 索引覆盖/模态

我的位置有问题：粘性和 z 索引我希望粘性元素中的模态被覆盖层覆盖。使用位置：相对它可以工作：模态位于覆盖之前。但是...

html css css-position z-index

回答 2 投票 0

防止Chrome浏览器将position属性转换为inset

我已经和这个问题斗争了好几天了，我不知道为什么 chrome 浏览器将 CSS 位置属性（上、右、下、左）转换为插入属性（通常不支持...

css google-chrome css-position

回答 4 投票 0

将固定宽度的可变高度 div 水平居中，使其溢出其父级

考虑这个 HTML：这是一些文字 <... 考虑这个 HTML： <body style="max-width: 50px; border: 1px solid black; margin: 0 auto;"> <p>This is some text</p> <div style="width: 100px; background: yellow"> <p>Some wider content</p> </div> <p>Some more narrow text</p> </body> 我想将黄色框居中，使其溢出body。我在 StackOverflow 上查看了很多关于如何执行此操作的答案，然后通常涉及将 div 设置为相对定位并将其包装在另一个 div 中，但随后您始终需要显式设置包装器 div 的高度。有没有办法让div水平居中而不影响垂直布局的工作方式？另请注意，我确实想将其居中；不仅仅是抵消固定金额。在该 div 上使用以下设置： position: relative; left: 50%; transform: translateX(-50%); 这会将 div 向右移动父级宽度的 50%，然后向左移动其自身宽度的 50%，从而使其水平居中。 position: relative; 是使这些设置发挥作用所必需的。请注意，使用 position: relative; 仍然保留 div 在文档流中占据的（水平）空间，而使用 position: absolute 时则不会出现这种情况。 body { max-width: 50px; border: 1px solid black; margin: 0 auto; } div { position: relative; left: 50%; transform: translateX(-50%); width: 100px; background: yellow; } <body> <p>This is some text</p> <div> <p>Some wider content</p> </div> <p>Some more narrow text</p> </body> 你可以使用弹性盒。请注意，这将改变边距与子项交互的方式。 body { display: flex; flex-direction: column; align-items: center; } <body style="max-width: 50px; border: 1px solid black; margin: 0 auto;"> <p>This is some text</p> <div style="width: 100px; background: yellow"> <p>Some wider content</p> </div> <p>Some more narrow text</p> </body>

html css css-position

回答 2 投票 0

将固定宽度的可变高度 div 水平居中，使其溢出其父级

html css css-position

回答 2 投票 0

水平滚动主体上的固定标题

我正在尝试创建一个表。我希望它的第一列得到修复。我已经使用以下方法完成了 tr > th：第一个孩子， tr > td:第一个孩子 { 位置：粘性；左：0； } ...

html css scroll css-position

回答 1 投票 0

`box-shadow` 无法在 Chrome 中与 `border-collapse` 和 `position:relative` 结合使用

我有一个带有数据的。由于风格原因，它有边框折叠。在该表中，元素具有position:relative，因为我希望它们有一个工具提示（我实现了 vi... 我有一个带有数据的<table>。由于风格原因，它有border-collapse。在该表中，<td>元素具有position: relative，因为我希望它们有一个工具提示（我通过子<div>和position: absolute实现）。在 Chrome 中，除非我删除 box-shadow 或 <td>（我不想删除，因为出于上述原因我需要它们），否则 border-collapse 的 position: relative 不起作用。我该如何解决这个问题？它在 Firefox 中运行良好。这是一个小例子： table { border-collapse: collapse; } td { position: relative; box-shadow: 0 0 10px black; } <table> <tr> <td>This has a shadow in Firefox but not in Chrome</td> </tr> </table> 对于质疑 position: relative 的人，这里有一个更长的示例，其中删除 position: relative 会破坏工具提示所需的功能： table { border-collapse: collapse; } td { position: relative; box-shadow: 0 0 10px black; border: 1px solid black; } div { visibility: hidden; position: absolute; background-color: #ff5555; z-index: 1000; right: 0; /* -1px looks inconsistent across columns :( */ top: 100%; /* pixel-perfect */ padding: 5px; border: 1px solid black; } td:hover>div { visibility: visible; } <table> <tr> <td>Hover your mouse cursor here <div>tooltip</div> </td> </tr> <tr> <td>Shadow is missing in Chrome</td> </tr> </table> 这是 Chrome 中 border-collapse、position: relative 和 box-shadow 组合的已知问题。原始解决方案表格行上的框阴影未出现在某些浏览器上以下是修改 CSS 的方法： table { border-collapse: collapse; } td { position: relative; box-shadow: 0 0 10px black; transform: scale(1); } div { visibility: hidden; position: absolute; background-color: #ff5555; z-index: 1000; right: 0; top: 100%; padding: 5px; border: 1px solid black; } td:hover>div { visibility: visible; }

css html-table css-position border-collapse

回答 1 投票 0

CSS 定位：将子级设置为绝对位置，将父级设置为静态位置

如果我将子 div 的位置设置为绝对，然后要相对于父级定位它，我必须将父级的位置设置为相对，对吧？如果我设置位置也可以吗...

css css-position absolute

回答 1 投票 0

学习 HTML 和 CSS 挑战斗争

第一次来这里。我正在参加 Angela Yu 的 Web 开发训练营，并做一个项目来测试我对级联（特异性和继承）、CSS 选择器及其组合的了解，...

css css-selectors css-position

回答 1 投票 0

css-position 相关问题

最新问题