css-position | 易学教程

CSS position relative without relative width?

阅读更多关于 CSS position relative without relative width?

问题 I'd like an element to have relative positioning. But I don't want its child element (with position:absolute ) to have relative width to the parent. For example: http://jsfiddle.net/t2yJP/. I'd like the second body>div to have position:relative , but have its child's width maintain the same behavior. 回答1: How about this jsFiddle. But you should really rethink your strategy. In your fiddle, your second example only works because the parent div is not positioned and therefore, the .abs div is

Fixed sidebar with Skeleton responsive layout

阅读更多关于 Fixed sidebar with Skeleton responsive layout

问题 I have a simple two column responsive design with Skeleton boilerplate. For the sidebar I have this div , inside a container div : <div class="container"> <div class="four columns"> /* logo and menu */ </div> <div class="nine columns post"> /* contents... */ </div> </div> I like the way it looks in wide viewports and how it's stacked on narrower ones, but I'd like to have the sidebar ( four columns div ) in the wider sizes always fixed at the left, while scrolling the content of the other div

How to force ShiftNav to Lock in place the Header (Logo) on menu-open

阅读更多关于 How to force ShiftNav to Lock in place the Header (Logo) on menu-open

问题 I am trying to make the ShiftNav menu plugin to apply Lock Scroll - aka lock_body in source code - on a new theme, which should make the-shifted-to-the right-by-the-opened-menu-content locked on y-scroll - obviously, (tested on previous theme). This option will work if the Shift Body will be enabled, which I did. In these conditions the Lock Scroll it doesn't work. I've tried to fix the header and other elements in position using position: fixed !important; but as soon as the left menu will

How to force ShiftNav to Lock in place the Header (Logo) on menu-open

阅读更多关于 How to force ShiftNav to Lock in place the Header (Logo) on menu-open

Is `position: fixed` on `<body>` problematic?

阅读更多关于 Is `position: fixed` on `` problematic?

问题 On a SPA for mobile devices and desktop browsers I need to set position: fixed on <body> to avoid iOS' overflow/rubberband scrolling. position: fixed and modifications on the <body> are always somewhat hacky and risky to cause problems. This is why I wanted to clarify: Are there any known problems / caveats / things to watch out for (i.e. stacking context, z-indexing context, static/relative/absolute/fixed positioning on children) / ... when adding position: fixed to <body> 回答1: The "position

Vertical and horizontal align of divs

阅读更多关于 Vertical and horizontal align of divs

问题 Please expand the jsfiddle to see box in action, http://jsfiddle.net/5fp37/. I want the blue border boxes to align side by side, but I dont want to mention a width to the boxes. This fiddle works ok but as soon as I remove the width:400px , both boxes get on top/bottom of each other. Any clue? dont want to specifiy width of any thing. board or box. just a minimum width of box, because ther could be unkown number of boxes. and each would alight side by side Nor want the divs to change position

Why position sticky is not working if followed by position absolute element?

阅读更多关于 Why position sticky is not working if followed by position absolute element?

问题 Below is the code snippet and if run it, you can see the header element does not stick. I have looked at the at following questions. “Position: sticky;” not Working CSS and HTML and CSS: 'position: sticky' not working when 'height' is defined among many others but it did not help.. Here is my code. <body style="margin: 0"> <div id="header" style="height: 50px;width: 100%;position: sticky;top: 0px;background-color: rgb(33, 150, 243);"> <div>header contents</div> <div>header contents</div> <

4 Column Position absolute layout

阅读更多关于 4 Column Position absolute layout

问题 I have a layout setup which can be view here: http://jsfiddle.net/Pn3ts/ It all works fine but i need to set a max/min width around the whole lot. So i assume to do this i'd add in position: relative; onto the .row class. However if i do this the background of each .col seems to collapse. (see here: http://jsfiddle.net/YDBYK/) How would i work this? 回答1: Give the html , body , and .row a height of 100% and it'll work. html, body { height: 100%; } .row { position: relative; width:100%; height:

Change position of an element - responsive website

阅读更多关于 Change position of an element - responsive website

问题 How can i change the position of an element from being left to being right in a smaller screen? This is for wider screens: .nav { position:absolute; top: 0px; left: 5%; } and i would like to position it right:10px for the smaller screen. Thanks. =========================================================== I made a jsfiddle link: http://jsfiddle.net/romullus/5u64M/ =========================================================== 回答1: You can set the break points this way(assuming 600 px is the

How to make image elements scale with window instead of repositioning

阅读更多关于 How to make image elements scale with window instead of repositioning

问题 I have a project, where I have 4 images together in the middle of the window, laid out like this: 12 34 I want the images to all scale up and down with the window, but maintain their position. Right now, I have them all in a div called Center: <div style="max-width:1200px;" id="centerArrows"> <img src="images/homePage/arrowUL.png" style="position: relative; top: -100px; float:left;" /> <img src="images/homePage/arrowUR.png" style="position: relative; left: 40px; top: -95px;" /> <img src=