css-position | 易学教程

Is it possible to position an element relative to the border-box of its parent?

阅读更多关于 Is it possible to position an element relative to the border-box of its parent?

问题 Consider the following jsfiddle for reference: http://jsfiddle.net/apmmw2ma/ <div class='outer'> <div class='inner'> Inner. </div> Outer. </div> div.outer { position: absolute; left: 10px; top: 10px; border: 5px solid green; padding: 10px; } div.inner { position: absolute; left: 0; top: 100%; border: 10px solid red; padding: 15px; } As you can see, the “inner” box (with the red border) is positioned relative to the outer’s padding-box : left:0 positions it just to the right of outer’s border,

Is position: fixed z-index relative to its parent's z-index?

阅读更多关于 Is position: fixed z-index relative to its parent's z-index?

问题 I have a fixed position element inside a relatively positioned element, as far as I'm concerned the position: relative element shouldn't have any effect on the position: fixed (fixed elements are positioned relative to the window, right?). However, the fixed elements z-index seems to be inherited by it's parent, to the point where it's z-index can be no higher than its parent's z-index. I hope I'm making sense? Below is a HTML example of what I'm talking about: .outer { position: relative; z

DIV absolute positioning - maintain position after browser window resize

阅读更多关于 DIV absolute positioning - maintain position after browser window resize

问题 I am displaying divs with position absolute. .my_label{ list-style:none; list-style-type:none; position:absolute; top:2px; left:10px; width:20px; height:20px; background-color:#FF1021; } once I re-size the browser window, all these divs stay at same position. and they're not absolute to the parent elements anymore. I want them to stay in relation with the surrounding objects. should I use position "relative" or is there another way? (also jQuery is welcome) thanks a lot 回答1: To make an

Fixed position misbehaviour in IE11

阅读更多关于 Fixed position misbehaviour in IE11

问题 I am experiencing elements position misbehaviour into my page, in IE(11) only; live link here. The logotext, the menu and the left sidebar text, remain in place doesn't move with the wrapper when the left slider is open (clicking on info+ button). I've read about position: fixed + transition in IE problems. I've tried to apply position: expression(fixed); to the header but something went wrong and the wrapper receive a brake-movement at open/closing slider. (The sidebar didn't work with

Using fixed position with a grid layout framework

阅读更多关于 Using fixed position with a grid layout framework

问题 So I am creating a web page, where the menus on the left hand side are fixed (They follow you when you scroll up and down the page). I am currently using The Grid layout: Foundation (by zurb) http://foundation.zurb.com/docs/grid.php. Which uses a twelve column grid. I am having problems positioning the fixed layout and still using the grid at the same time. How can I use a grid layout and fixed elements on a page? <div class="container"> <div class="row"> <div class="four columns

Fluid width fixed position

阅读更多关于 Fluid width fixed position

问题 Imagine: <div class="outer"> <div class="inner"> </div> </div> Where: .outer is part of a column structure, and its width is a percentile and therefore fluid. .inner represents a fixed position element that should fill with a 100% width the .outer element. However its position vertically remains the same, therefore fixed . I’ve tried to implement this layout with the following CSS: .outer { position: relative; width: %; } .inner { position: fixed; width: 100%; } However, .inner does not

Is position 'initial' cross-browser - css

阅读更多关于 Is position 'initial' cross-browser - css

问题 I have a css conflict, so I have to go against an absolute positioning property that deals with some class .myclass . But in one case, I want a div with .myclass class to have a no absolute positioning. So I put position: initial , which works in Chrome, but is it cross-browser? I googled it and found nothing really precise. 回答1: The default for position is position: static; 回答2: The initial keyword was introduced in 2011 in the Cascading and Inheritance Module -- it's supported in FF 19 + ,

CSS, position: absolute, scrollbars

阅读更多关于 CSS, position: absolute, scrollbars

问题 Say there is a page: <html><body> <div style="position: relative;"> <div style="position: absolute; left: -30px;">LEFT</div> <div style="position: absolute; right: -30px;">RIGHT</div> <div> </body></html> Why the horizontal scrollbar only accounts for the RIGHT overflow? In other words, why LEFT triggers no scrollbar, while RIGHT does? Is there a way, other than body -> overflow: hidden , for RIGHT not to trigger the scrollbar? Edit : What I try to achieve is a wrapper in the middle of page

Overflow of sidebar with Twitter Bootstrap Affix [closed]

阅读更多关于 Overflow of sidebar with Twitter Bootstrap Affix [closed]

问题 Closed. This question is off-topic. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed 4 years ago . I'm trying to use the affix plugin by twitter bootstrap but I can't figure out how to constrain it within the parent container, i've created the following example to show my problem: Problem demo: http://www.codeply.com/go/DvcRXkeFZa <div class="container"> <div class="row"> <div class="col-md-3 column"> <ul id=

Absolutely positioning images inside relatively positioned div

阅读更多关于 Absolutely positioning images inside relatively positioned div

问题 I've seen several posts related to this issue, but still can't get the following to work: .container { position: relative; width: 100%; } .left { position: absolute; left: 0px; } .right { position: absolute; right: 0px; } <html> <body> <div class="container"> <img src="..." class="left" /> <img src="..." class="right" /> </div> </body> </html> According to http://www.w3schools.com/css/css_positioning.asp, specifically the line that says: An absolute position element is positioned relative to