css-position

Position sticky not working with body{ overflow-x: hidden; } [duplicate]

由 一曲冷凌霜 提交于 2019-12-07 04:35:50
问题 This question already has answers here : body { overflow-x: hidden; } breaks position: sticky (3 answers) Closed 11 months ago . I am trying to use bootstrap's sticky header. But when I added body {overflow-x: hidden; } it stopped working. Now I seen on different pages that position: sticky with it's parent having overflow set to something else as visible not showing up, is (or was) a common problem. But all of the posts were like 1 year old. Like this post: "Position Sticky with overflow-x

Difference between transform: translate and position:relative;?

由 白昼怎懂夜的黑 提交于 2019-12-07 01:59:02
问题 As the title says, what are the differences between transform: translate(x, y) and position: relative. Since they both accomplish the same thing (position elements) anyway, then how do they differ in purpose and application? I read an article about centering elements using "transform: translate;" that said it is better to use "transform" due to GPU and optimization reason, but I don't really see the problem since it's not a big deal anyway if you're just re-positioning an element and not

Horizontally center absolute positioned element below the center of another element

由 北城余情 提交于 2019-12-07 01:45:05
问题 How can I get an absolute positioned element to be centered below the center of another element? Example of usage: A date-picker that opens/shows a new (absolutely positioned) element when clicked. . <-- Center [ . ] <-- Not absolutely positioned element, a button. Always displayed [ . ] <-- Absolutely positioned element. Visibility toggled by button Edit: To make it clear, what I'm looking for is a simple way to make the center of the elements align. 回答1: There are different ways to do this,

Relative positioning of two divs

由 穿精又带淫゛_ 提交于 2019-12-07 00:40:31
I made this fiddle , I am expecting the red div to be positioned directly below the yellow one. They are not. How can I position both the div up and down relative to wrapper ? Guessing it should be simple, but I can't get it to work. I think I need to use relative . The 'bars' are time lines and 'float around' freely. HTML: <div class="wrapper" style="background:blue"> <div class="up" style="background:yellow"/> <div class="down" style="background:red"/> </div> CSS: .wrapper { width:50px; height:400px; background:blue; margin:1em; } .up { position:relative; top:100px; /*I want this one 100px

Position elements around another with CSS

由 人盡茶涼 提交于 2019-12-06 23:52:03
问题 I want to achieve this result with HTML and CSS: Where the red box is a big content (A PDF content), and the blue ones organize around it. First by its side and then, when there is enough room, under it. My HTML structure is as follows, but I can change it: <div id="outerContainer"> <div id="bigRedBox"></div> <div> <ul id="blueContentList"> <li class="blueContent"></li> <li class="blueContent"></li> <li class="blueContent"></li> <li class="blueContent"></li> <li class="blueContent"></li> </ul

Offset div from center

由 ╄→гoц情女王★ 提交于 2019-12-06 21:02:14
问题 I'm trying to position a div x amount of pixels to the right of the center of the page. The div would therefore be relative to the center. So far, I've tried something stupid like margin:0 auto; margin-left:20px; But you don't need to test that in a browser to know it wouldn't work. Thanks in advance for any help. 回答1: I'd try using two DIVs, one inside another. Something like this: <div class="outer"> <div class="inner">Hello, world!</div> </div> .outer { width: 1px; /* Or zero, or something

Absolutely positioned element positions relatively to transformed element

由 回眸只為那壹抹淺笑 提交于 2019-12-06 20:49:35
I recreated an issue that I am encountering in a template. There is a nav that has position: relative; . Inside the nav there is a div with two lists nested. One of the lists is position absolutely to stick to the bottom of the nav . The problem occurs when the div has a transformation applied to it. When the div in between the absolutely and relatively positioned elements get's a transform property, the absolute list positions itself relatively to the div instead of the nav . MDN Docs state the following about position:absolute Do not leave space for the element. Instead, position it at a

Workaround/polyfill for Android 4.0.3 Stock browser z-index issues

由 白昼怎懂夜的黑 提交于 2019-12-06 20:18:57
问题 I'm looking for a workaround or polyfill for the z-index bug described in this report: http://code.google.com/p/android/issues/detail?id=31862 My markup and CSS looks basically the same as the one given in the bug report. It'd be really great if somebody could give me a hint in the right direction on how to solve this. 回答1: I had the same problem, and fixed it by adding the following css to my popups: -webkit-transform:translateZ(0); 回答2: Alternative solution (found here: https://coderwall

Detect whether an element has position:fixed (possibly by parent element) via jQuery

由 只愿长相守 提交于 2019-12-06 20:07:29
问题 Update I'd like to avoid walking back through all the element's parents, testing each in turn, but that is the best solution I've managed to find so far, as in this answer. Inside an event handler, I would like to detect whether the target element's position is relative to the viewport (fixed) or the document (static, relative or absolute). Given that an element's position might be fixed because it has "position:fixed", or because one of its parents is "position:fixed", what is an efficient

Simulating position: fixed in IE6 with a div of 100% height?

由 旧巷老猫 提交于 2019-12-06 16:49:09
问题 I have a sidebar on my webpage that is supposed to span 100% of the page (vertically). It is then supposed to stay there, so when the rest of the content scrolls it does not. To do this, I used: body { height: 100%; } #sidebar { height: 100%; width: 120px; position: fixed; top: 0; left: 0; } This works great in all modern browsers! Unfortunately, I have to code for IE6, which does not support position: fixed. Do you have any idea how I would do this? 回答1: This is the fix » Me? I'd just as
订阅 css-position