草庐IT

ballot_position

全部标签

html - 位置 :fixed element within a position:relative parent. 哪个浏览器渲染正确?

我看到固定位置元素在相对定位的父元素中的行为方式存在差异。根据我在网上找到的文档,FireFox和Chrome应该将元素修复到视口(viewport)而不是父元素。但是,我发现如果我没有在固定元素上指定左/右值,它的行为表现为静态和固定之间的某种混合,从某种意义上说,它垂直固定到视口(viewport),但移动时好像它是父元素中的静态元素。我找不到任何关于这些条件的官方/受尊重的文件。他们基本上都是这样说的:FixedPositioningDonotleavespacefortheelement.Instead,positionitataspecifiedpositionrelativ

html - 宽度为百分比的 `position:fixed` 侧边栏?

我已经成功使用了美丽的Susygridsystem创建类似于WebDesignerWall.com:之一的响应式布局我未能实现的是position:fixed侧边栏。当页面滚动并停留在同一个地方时,这样的侧边栏不会滚动。这非常方便(无论如何,您实际上不能将更多内容放入侧边栏,因为它会在窄窗口中使页面顶部变得困惑)。每当我将position:fixed应用于列时,我的布局就会变得疯狂:彩色block被声明为三列宽,但当position:fixed应用于侧边栏时会进一步拉伸(stretch)。我认为问题是侧边栏的宽度是相对的,我。e.以百分比设置。由于position:fixed,宽度是根

html - 宽度为百分比的 `position:fixed` 侧边栏?

我已经成功使用了美丽的Susygridsystem创建类似于WebDesignerWall.com:之一的响应式布局我未能实现的是position:fixed侧边栏。当页面滚动并停留在同一个地方时,这样的侧边栏不会滚动。这非常方便(无论如何,您实际上不能将更多内容放入侧边栏,因为它会在窄窗口中使页面顶部变得困惑)。每当我将position:fixed应用于列时,我的布局就会变得疯狂:彩色block被声明为三列宽,但当position:fixed应用于侧边栏时会进一步拉伸(stretch)。我认为问题是侧边栏的宽度是相对的,我。e.以百分比设置。由于position:fixed,宽度是根

html - 为什么 position absolute 呈现在 position static 之上?

我有一个简单的绝对div和后面的另一个普通div。为什么绝对div呈现在另一个之上?我知道我可以用z-index修复它-但原因是什么?JSBIN:http://jsbin.com/yadoxiwuho/1.with-absolute{position:absolute;top:0px;bottom:0px;background-color:red}.other{background-color:yellow;}HelloWhyisthisnotontop?Itcomeslast 最佳答案 元素的绘制顺序由CSS2.1spec,E.2

html - 为什么 position absolute 呈现在 position static 之上?

我有一个简单的绝对div和后面的另一个普通div。为什么绝对div呈现在另一个之上?我知道我可以用z-index修复它-但原因是什么?JSBIN:http://jsbin.com/yadoxiwuho/1.with-absolute{position:absolute;top:0px;bottom:0px;background-color:red}.other{background-color:yellow;}HelloWhyisthisnotontop?Itcomeslast 最佳答案 元素的绘制顺序由CSS2.1spec,E.2

css position: sticky;实现上下粘性布局,中间区域滚动

sticky主要解决的问题1、使用absolute和fixed中间区域需要定义高度2、使用absolute和fixed底部需要写padding-bottom避免列表被遮挡住一部分(底部是浮窗的时候,需要动态的现实隐藏)DOCTYPEhtml>htmllang="en">head>metacharset="UTF-8">metaname="viewport"content="width=device-width,initial-scale=1.0">title>Documenttitle>style>*{margin:0;padding:0;}.wrap{display:flex;flex-di

html - 为什么位置为 : fixed moving with a non-positioned sibling? 的元素

关于S.O.有很多问题。涵盖了如何解决此问题的答案(添加top:0),但它们都没有尝试真正解释header移动背后的原因。我更好奇为什么会这样。ProjectHeadersomecontentheader{position:fixed;}#layout-maincontent{margin-top:90px;//movesheaderdown.}类似问题列表,但没有推理:Topmost'fixed'positiondivmovingwithnonpositiondivmarginaffectsotherfixedelementspositionmargin-topdivcausesfi

html - 为什么位置为 : fixed moving with a non-positioned sibling? 的元素

关于S.O.有很多问题。涵盖了如何解决此问题的答案(添加top:0),但它们都没有尝试真正解释header移动背后的原因。我更好奇为什么会这样。ProjectHeadersomecontentheader{position:fixed;}#layout-maincontent{margin-top:90px;//movesheaderdown.}类似问题列表,但没有推理:Topmost'fixed'positiondivmovingwithnonpositiondivmarginaffectsotherfixedelementspositionmargin-topdivcausesfi

html - 为什么 `transform` 会中断 `position: fixed` ?

其实我已经找到问题的原因了。我现在的问题是,为什么将transform添加到您的html,body会破坏position:fixed?原始问题最简单的CSS任务对我来说似乎失败了:position:fixed没有保持元素相对于视点的位置。考虑以下样式表:.stay-there-dammit{position:fixed;right:0px;left:0px;z-index:1030;}第一次加载页面时,定位是正确的。但是对视口(viewport)的任何更改(例如滚动或调整大小)都不会影响.stay-there-dammit元素的定位。可以说它没有调整其位置以适应新的视口(viewpor

html - 为什么 `transform` 会中断 `position: fixed` ?

其实我已经找到问题的原因了。我现在的问题是,为什么将transform添加到您的html,body会破坏position:fixed?原始问题最简单的CSS任务对我来说似乎失败了:position:fixed没有保持元素相对于视点的位置。考虑以下样式表:.stay-there-dammit{position:fixed;right:0px;left:0px;z-index:1030;}第一次加载页面时,定位是正确的。但是对视口(viewport)的任何更改(例如滚动或调整大小)都不会影响.stay-there-dammit元素的定位。可以说它没有调整其位置以适应新的视口(viewpor