css-position | 易学教程

Bootstrap modal at top of iframe regardless of scroll position. How do I position it on screen?

阅读更多关于 Bootstrap modal at top of iframe regardless of scroll position. How do I position it on screen?

When embedding a Bootstrap app in an iframe, modal dialogs always open at the top of the iframe, not the top of the screen. As an example, go to http://getbootstrap.com/javascript/ and open an example modal on the page. Then using the sample code below which places the same bootstrap page in an iframe, find a modal and open it: <html> <head> </head> <body> <table width="100%"> <tr><td colspan="2" style="height:80px;background-color:red;vertical-align:top">Here's some header content I don't control</td></tr> <tr><td style="width:230px;height:10080px;background-color:red;vertical-align:top">Here

Absolute positioned item in a flex container still gets considered as item in IE & Firefox

阅读更多关于 Absolute positioned item in a flex container still gets considered as item in IE & Firefox

问题 If I have multiple elements with the property justify-content: space-between in a flex container and I want to absolute position one of them and remove from the flex flow, as showed here: This works in Chrome but not in IE and Firefox as the absolute positioned element is considered as 0 width, but still in the flex flow: Is there a fix to this keeping the layout as it is? CodePen 回答1: It turns out that all it takes is three simple steps (Demo) 1). Set the left and right margin to auto on

Position Fixed and iFrame on Mobile Safari

阅读更多关于 Position Fixed and iFrame on Mobile Safari

问题 I have been able to get position: fixed working perfectly on a div outside an iFrame, but once it is loaded in an iFrame, position:fixed doesn't work anymore. Is this a know issue (I haven't been able to find anything on the topic) or am I missing out an important piece of CSS, or meta viewport information? Is there a way to work around this? Thanks! 来源： https://stackoverflow.com/questions/15874910/position-fixed-and-iframe-on-mobile-safari

Position relative in firefox causing problems with google-map-markers clickable area

阅读更多关于 Position relative in firefox causing problems with google-map-markers clickable area

The clickable area around a google-map-marker is shifting/misplaced when text (or other content) is added before the map-div. It is working fine in chrome, ie etc. - only firefox seems to cause this problem (as far as I can see). When - in web-console - changing map-div's elementstyle from 'relative' to 'static' the problem is gone. The code below is borrowed from googles map-examples - if I uncomment the lorem-text the map-markers clickable area is moving/misplaced. Any suggestions on how to solve the problem (if there is a problem - I might have missed something obvious): <!DOCTYPE html>

need help CSS centering with absolute positioning

阅读更多关于 need help CSS centering with absolute positioning

问题 I've never been totally satisfied with my various solutions to centering content in a web page. the <center> tag has been deprecated back in the middle of the 18th century, but I fail to see a reasonable alternative. Specifically what I want is to have a parent DIV that is centered, but against whose upper left hand corner I can set things "absolutely". Is there a way to accomplish this without using window.onresize javascript that remeasures everything? It seems like a fairly straight

CSS how to position element in half height (vertical 50%)

阅读更多关于 CSS how to position element in half height (vertical 50%)

问题 I'm looking forward to build a tooltip which is positioned next to the element. It's easy to put it over and under in the center of element. But is there a way to do so vertically (on the right or left side of element vertically positioned in a middle of elements height)? For my purpose, height of the element is known & height of tooltip is not. And tooltip can be a child of element. But, I'm also curious about how to do it when both heights are unknown. By heights I understand element's and

Setting 100% height on an absolutely positioned element when the content expands past the window size

阅读更多关于 Setting 100% height on an absolutely positioned element when the content expands past the window size

问题 So after reading Stack Overflow and the web, I've gathered that there are two main tricks to achieving 100% height: Set height:100% on both the HTML and BODY Set your element to have either: height:100%, or top:0, bottom:0, position:absolute However, even with those tricks I'm having difficulty setting the height of an absolutely positioned DIV to a true 100%. I can get 100% of the viewport size, but if the user scrolls down at all it becomes apparent that the div doesn't truly have 100%

Break an absolutely positioned element out of its relatively positioned ancestor?

阅读更多关于 Break an absolutely positioned element out of its relatively positioned ancestor?

Suppose I have a document like <style type="text/css"> div { border:1px solid; padding:15px; } #i_am_relatively_positioned{ background-color:#fcc; margin:50px; padding:50px; position:relative; } #inner { background-color:#cfc; } #i_want_to_be_absolute_to_body{ background-color:#ccf; left:0; position:absolute; top:0; } </style> <body> <div id="i_am_relatively_positioned"> <div id="inner">inner</div> <div id="i_want_to_be_absolute_to_body">absolute to body</div> </div> </body> Is there a way to make #i_want_to_be_absolute_to_body positioned absolute with respect to the body element, rather than

ie7 - relatively positioned div does not scroll in its container

阅读更多关于 ie7 - relatively positioned div does not scroll in its container

I have a div with a scrollbar. Within it, I have various elements, one of which is an link with display:block and position:relative; Inside of this link are an img with default positioning, and an h3 tag which is supposed to appear over the top of that img, with position:absolute. When I scroll the DIV, other things scroll properly, but these elements and their contents stay fixed. Any ideas on how to solve this bug? Here's a fiddle, and the approx. code is below: http://jsfiddle.net/Z987x/ <a class="slider_link" data-ident="herb-garlic-roast-tenderloin" href="http://superfadlabs.com/clients

Preserve normal word wrapping inside absolutely positioned container

阅读更多关于 Preserve normal word wrapping inside absolutely positioned container

问题 I have an absolutely positioned block of text inside a relatively positioned container. The absolutely positioned element exceeds the right boundary of its container. The problem is: the text isn't wrapping as normal; it's breaking prematurely rather than expanding to its defined max-width : Observed behavior: Desired behavior HTML/CSS (JSFIDDLE: http://jsfiddle.net/WmcjM/): <style> .container { position: relative; width: 300px; background: #ccc; height: 100px; } .text { position: absolute;