css-position | 易学教程

Absolute positioning ignoring padding of parent

阅读更多关于 Absolute positioning ignoring padding of parent

问题 How do you make an absolute positioned element honor the padding of its parent? I want an inner div to stretch across the width of its parent and to be positioned at the bottom of that parent, basically a footer. But the child has to honor the padding of the parent and it's not doing that. The child is pressed right up against the edge of the parent. So I want this: but I'm getting this: <html> <body> <div style="background-color: blue; padding: 10px; position: relative; height: 100px;"> <div

Popup/tooltip position in JQueryMobile

阅读更多关于 Popup/tooltip position in JQueryMobile

问题 I want to show a tooltip under the mousecursor. Since JQueryMobile doesn't have any widget for this, I use the Popup widget (which comes very close). When showing the popup, I can specify X and Y coordinates. But the problem is it centers the popup based on X and Y. And I want to display it on the right-side of the mousecursor, not right under it (because that makes the text hard to read because the cursor is over it). How can I show a popup this way? The only thing I can think of is

Opacity of div creates unexpected results and blends content with image

阅读更多关于 Opacity of div creates unexpected results and blends content with image

问题 Can someone please explain why the second & third divs in the following snippet appear to blend with the image? For clarity, the question here is about why the opacity of the content element seems to affect layer order. The image is an animated gif with no transparency. In the upper div everything seems to behave as expected. The image swirls around with it's white background blocking the text content of the div below it. In the lower two divs I've decreased opacity and somehow this creates

z-index on absolutely positioned nested elements

阅读更多关于 z-index on absolutely positioned nested elements

问题 I have some absolutely positioned boxes. One of them has nested popup, larger then box. I want to make popup in front of all the boxes. Setting z-index: 100 on boxes and z-index: 200 on popup does not help. Boxes going in doc-order after box with popup appear to be over popup. What do I miss about z-indices? div { border: 1px solid black; } .container { position: relative; } .foo { position: absolute; background-color: white; width: 5em; z-index: 100; } #b0 { top: 0em; left: 0em; } #b1 { top:

Keep div:hover open when changing nested select box

阅读更多关于 Keep div:hover open when changing nested select box

问题 This is an IE-only problem. You can see the problem here (dead link) with IE (wait for the page to load, and hover the NY Times icon in the bottom left toolbar. Then try to select a new option). The Layout: .toolTip becomes visible when it's parent div is hovered over. Inside of .toolTip is a select box. When the user opens the select box to make a selection, the parent element gets hidden. Why is IE thinking that when I hover over the Select box, I am not over the parent div anymore? Here is

dximagetransform.matrix, absolutely position child elements not rotating in IE 8 standards mode

阅读更多关于 dximagetransform.matrix, absolutely position child elements not rotating in IE 8 standards mode

问题 I've looked all over for more information on this, and would like to know why it happens. Here's the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> </head> <body> <div style="position:absolute; top:200px; left:200px; height:200px; width:200px; border:1px solid black; filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9886188373396114, M12=-0.15044199698646263, M21=0

How to stick table header(thead) on top while scrolling down the table rows with fixed header(navbar) in bootstrap 3?

阅读更多关于 How to stick table header(thead) on top while scrolling down the table rows with fixed header(navbar) in bootstrap 3?

Bootstrap layout with fixed-navbar . Having table with so many rows in body. Issue? As i scroll the page navigation-bar will be there because it is fixed. as i scroll more i want table header to be fixed under navigation-bar and the content of table(table-body) scrolls without scroll bar! Something like This - Codepen **Fiddle ** Bootstrap table Working Fiddle after referring to the answer! HTML  <div id="wrap">  <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button"

How to put text over an image without absolute positioning or setting the image as backbround

阅读更多关于 How to put text over an image without absolute positioning or setting the image as backbround

问题 I'm trying to see if it is possible to put some text over an image without using position: absolute or having the image being, the background of an element. The reason for the constraints is that the HTML code is going into an e-mail, and it turns out that hotmail supports neither. I remember that when I first began studying CSS, fiddling around with float-ing text around images I often ended up with the text merrily going all over the image. Sadly, I can't reproduce that behavior. Full story

What are `scrolling boxes`?

阅读更多关于 What are `scrolling boxes`?

In the CSS Positioned Layout Module Level 3 (Working draft) in chapter 6.2. Sticky positioning we have this definition: (Emphasis mine) A stickily positioned box is positioned similarly to a relatively positioned box, but the offset is computed with reference to the nearest ancestor with a scrolling box , or the viewport if no ancestor has a scrolling box . What are these scrolling boxes? Further down the document there is an issue about the term scrolling boxes Issue 6 Sticky positioning should really be defined in terms of the nearest scrollable ancestor, but there is currently no such term

absolute positioned anchor tag (with no text) not clickable in IE

阅读更多关于 absolute positioned anchor tag (with no text) not clickable in IE

问题 I have two anchors positioned absolute on top of an image, the links are clickable in other browsers (Chrome, FF, Safari) but not in IE (tested in 8 & 9 so far) The strange thing is if I give the links a background-color they are clickable, however if the background-color is set to transparent ( which is what I want ) they are no longer clickable, I've also tried setting zoom:1 but no luck. I guess the hasLayout bit in IE went away with IE 8/9 so guessing zoom doesn't matter now for this kind