css-position | 易学教程

Browsers scrollbar is under my fixed div

阅读更多关于 Browsers scrollbar is under my fixed div

问题 i have a fixed header with 100% width. #header { background: #2e2e2e; width: 100%; z-index: 999; position: fixed; } browsers scrollbar is under my fixed div. How to fix that? 回答1: its because the overflow-x: hidden; in base.css line number 9 body { color: #444444; font: 13px/20px Arial,Helvetica,sans-serif; overflow-x: hidden; // remove this } 回答2: This can be solved by adding overflow of body from overflow:auto; to overflow:auto; overflow:initial; This is your issue If your scroll is set on

Negative margins vs relative positioning

阅读更多关于 Negative margins vs relative positioning

问题 I've come across many layout techniques involving negative margins, such as this classic for sidebar positioning. It seems like these techniques could just as easily be applied with relative positioning. So instead of this: .sidebar { margin-left:-600px; } One would do this: .sidebar { position:relative; left:-600px; } It seems like relative positioning might even be cleaner in the vertical direction, as top-margin manipulation may be affected by collapsing margin issues, etc. Is there any

Relatively position an element without it taking up space in document flow

阅读更多关于 Relatively position an element without it taking up space in document flow

问题 How can I relatively position an element, and have it not take up space in the document flow? 回答1: What you're trying to do sounds like absolute positioning. On the other hand, you can, however, make a pseudo-relative element, by creating a zero-width, zero-height, relatively positioned element, essentially solely for the purpose of creating a reference point for position, and an absolutely positioned element within that: <div style="position: relative; width: 0; height: 0"> <div style=

CSS: display:inline-block and positioning:absolute

阅读更多关于 CSS: display:inline-block and positioning:absolute

Please consider the following code: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style type="text/css"> .section { display: block; width: 200px; border: 1px dashed blue; margin-bottom: 10px; } .element-left, .element-right-a, .element-right-b { display: inline-block; background-color: #ccc; vertical-align: top; } .element-right-a, .element-right-b { max-width: 100px; } .element-right-b { position: absolute; left: 100px; } </style> <title>test</title> </head> <body> <div class="section"> <span

Position:fixed element within a position:relative parent. Which browser renders correctly?

阅读更多关于 Position:fixed element within a position:relative parent. Which browser renders correctly?

问题 I am seeing a discrepancy in how fixed position elements behave within a relatively positioned parent. According to the docs I am finding online, FireFox and Chrome should fix the element to the viewport and not the parent. However, I am finding that if I do not specify a left/right value on a fixed element, it behaves in a sort of mix between static AND fixed, in the sense that it's fixed vertically to the viewport, but moves as if it were a static element within the parent element. I can't

CSS - Making a div consume all available space

阅读更多关于 CSS - Making a div consume all available space

问题 All, I have a page which is suppose to take up only the available screen space in the browser. I have a 'top bar' and a 'bottom bar', both of which are fixed positioned at the top and bottom of the page. I want to have a div which will consume (take up) the remaining of the space inbetween the two bars mentioned above. Its crucial that the middle div is not overlapped by the top and bottom bars. Is this at all possible with CSS or do I need to make use of js. Also, if I do go with js,

Why isn't my margin working with position: fixed?

阅读更多关于 Why isn't my margin working with position: fixed?

问题 JSFiddle Demo I have a div for a header and a div for a content wrap. For some reason, I can't have a margin on the bottom of the header that forces the content wrap to push down. It just ignores it completely and I have no idea why. Does anyone know what is going on with this? It doesn't do this when I take away the position: fixed; attribute on the header, but I want it to be fixed at the top so when scrolling the header is always in view. Hoping someone can explain why this happens or at

Why does position:relative; appear to change the z-index?

阅读更多关于 Why does position:relative; appear to change the z-index?

So I have this markup and inside it there is <div class="mask"></div> which sets the blue overlay ontop of the image. If I don't make the .container position:relative , the title text gets hidden behind the blue layer... Almost as if it's usage is mimicking z-index Why is this the case? Pen: https://codepen.io/anon/pen/OBbbZB body { margin: 0; font-family: arial; } section { position: relative; background: url(https://preview.webpixels.io/boomerang-v3.6.1/assets/images/backgrounds/slider/img-41.jpg) no-repeat left center/cover; height: 70vh; display: flex; justify-content: center; } .container

Vertically center content of floating div

阅读更多关于 Vertically center content of floating div

问题 How do I verically center the content of floating div (which height I don't know)? There is very simple HTML and CSS (see this fiddle: http://jsfiddle.net/DeH6E/1/) <div class="floating"> This should be in the middle </div> .floating { height: 100px; float: left; border: 1px solid red; vertical-align: middle; } How do I make the sentence "This should be in the middle" appear really in the middle (vertically centered)? vertical-align: middle does not seem to work. I have tried display:

How to make div's percentage width relative to parent div and not viewport

阅读更多关于 How to make div's percentage width relative to parent div and not viewport

Here is the HTML I am working with . <div id="outer" style="min-width: 2000px; min-height: 1000px; background: #3e3e3e;"> <div id="inner" style="left: 1%; top: 45px; width: 50%; height: auto; position: absolute; z-index: 1;"> <div style="background: #efffef; position: absolute; height: 400px; right: 0px; left: 0px;"></div> </div> </div> What I would like to happen is for the inner div to occupy 50% of the space given to its parent div(outer). Instead, is is getting 50% of the space available to the viewport, which means that as the browser/viewport shrinks in size, so does it. Given that the