css-position

问题 I have the following situation: I have a container of a fixed size. Inside the container I display an image (of unknown size) that is bigger than the container. I want to display the image as big as possible (but keeping the aspect ratio). I also want the image to be vertically and horizontally centered in the container (so far so good, I know how do that) Now I want to have two overlays (of unknown size) over the image: one aligned with the top and one with the bottom of the image. I cannot

问题 I have a megamenu that is absolutely positioned, and as some of its parent elements need to have position:relative , I have to use position:unset on the direct parent. This works in Chrome and Firefox, however IE11 does not support unset or initial . I can't simply remove the relative positioning from all of the parent elements as that will break other things, but I have to have the megamenu absolutely positioned relative to the page (fixed position does not work). Is there an alternative to

问题 https://plnkr.co/edit/PuP3f71kCjkqgjjMkgNS?p=preview | Also have a stackoverflow snippet below. Without scrolling the tagHovers will display correctly: The problem I think the problem is because I have a fixed position set on the tagHovers tags-modal class. However I need the fixed position on that div so the tagHovers can break outside of the constraints of the .tags-container . Is there another way to achieve this effect without having to restyle the tagHovers so they have to fit inside the

问题 I am trying to put a small gradient on the bottom of a scrolling div. I've based my solution on the accepted answer to this SO thread. The gradient shows up fine, but when I scroll the content in the div, the bottom of the gradient moves. I need it to remain in place so that the content scrolls independently of the gradient. I've tried several combinations of position: fixed , position: relative , and position: relatve to no avail. What have I missed? Relevant markup: <div class=

问题 I am trying to achieve a a horizontal scrolling website with a fixed header and footer. Goals: 1. Fixed Header and Footer 2. No vertical scrolling 3. Content div fills all space between the header and footer I used position: absolute on the content to make sure the height:100% takes up the area between the header and the footer. (my third goal) However this also causes a vertical scrollbar to appear. live demo: http://jsfiddle.net/wQ2XR/230/ how can i achieve my goals without a vertical

问题 I have navigation fixed to the top of my page, but if an iframe-embedded youtube video is scrolled over it, it shows up on top of the nav (as well as any overlay or modal window-div). Tried setting the z-index on it, to no avail. I've found that you can set wmode="opaque" on the embed object to get this to work with an old style flash embed, but I'd prefer to work with HTML 5 and not have to require specific settings on a video embed http://jsfiddle.net/EB6gN/9/ 回答1: The correct answer is to

问题 I have a container element with long content which is scaled: .container { transform: scale(0.9); } inside this container I have a child div which is used to be a popup. It's positioned absolute with top 50% .popup { width: 300px; height: 200px; position: absolute; left: 50%; top: 50%; } but unfortunately when container is scaled this 50% is not working. I need to use ~240% if it appears on the bottom of a page. Do you now some specifics on applying positioning on children of scaled elements?

问题 I have two div s in a parent div . They render side by side <image><info> but on smaller screens I want them to render one under the other and swap positions, like <info> <image> So, their real order in html is <info> <image> and they both have float:right so they appear swapped and side by side. On smaller screens they both have float:none and thet appear one under the other as they should. I used Shlomi's answer from here and it works fine. The problem. When horizontal, I wan to align the

问题 I tried to find some solution for the following scenario: - fixed header - if content is too short, footer will stick to bottom - of content is longer, footer will be appended to content and scrollable I found this, but this works only while the header's not fixed: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ here's some fiddled CSS: http://jsfiddle.net/GxskJ/1/ I can't see what's going wrong and how to fix it. Another solution would be much appreciated as well. thank you!

问题 Is position:static equivalent to position: relative with none of the top, bottom, right, or left properties specified? I though of this because an element with postion: absolute be relative to the first element that does NOT have postion: static . It seems arbitrary to make an element with position: relative , which will behave identically to a position: static if no other properties are used. Figured I might be missing something about static vs relative . Thanks! 回答1: The answer is no , both