css-position | 易学教程

Trouble with nowrap and max-width on an absolutely positioned element

阅读更多关于 Trouble with nowrap and max-width on an absolutely positioned element

问题 I'm guessing these two attributes don't actually work together, but my situation: I'm trying to create a tooltip component. My tooltip is positioned absolutely, and as I don't know what the length of the content would be, has no width. So with width-related css, text just forms a tall, skinny column. I tried max-width , but on it's own, that does nothing. So I decided to try white-space: nowrap , and while it nicely doesn't wrap text, it also doesn't seem to honor max-width in a useful way,

Absolutely positioned container not expanding width to fit flexbox content [duplicate]

阅读更多关于 Absolutely positioned container not expanding width to fit flexbox content [duplicate]

问题 This question already has answers here : What are the differences between flex-basis and width? (3 answers) Closed last month . I have a flexbox inside of an absolutely positioned parent div . I expect the flexbox to have a computed width , causing the parent div to expand, but this doesn't happen. The parent div has some width, but it is not wide enough to accommodate the flexbox. Given that the flexbox has four children, each with flex-basis: 100px , and flex-shrink: 0 , I'd expect the

Jquery mobile Data-Filter Fixed position/Static

阅读更多关于 Jquery mobile Data-Filter Fixed position/Static

问题 I am using a listview with a data-filter in the ul and a long list. My problem is that when I scroll down the data-filter search disappears. It there anyway I could make it so it's always visible? Example: <ul data-role="listview" data-filter="true"> <li><a href="index.html">Acura</a></li> <li><a href="index.html">Acura2</a></li> <li><a href="index.html">Acura3</a></li> <li><a href="index.html">Acura4</a></li> </ul> 回答1: You can customize the search-filter-element's CSS so it is fixed in the

hover-menu in right side of fixed div

阅读更多关于 hover-menu in right side of fixed div

问题 I have a div with a fixed position (a top panel) which shall also contain a settings menu at the far right (currently via floating). When hovering over the settings-image, I want to display a menu below the image. I want the menu to be aligned to the right side just like the image. <div id="panel" style="position:fixed"> <panel-entry 1> <panel-entry 2> <panel-entry n> <div id="settings" style="float:right/snapped to the right side> <img src=settings> <ul> <li>setting 1</li> <li>setting 2</li>

If you specify `bottom: 0` for position: sticky, why is it doing something different from the specs?

阅读更多关于 If you specify `bottom: 0` for position: sticky, why is it doing something different from the specs?

问题 This is a question when I read an article on the MDN position property. I thought that there was a clear difference between the behavior of sticky described there and the actual behavior. According to the MDN, fixed position elements are treated as relative position elements until the specified threshold is exceeded, and when the threshold is exceeded, they are treated as fixed position elements until the boundary of the parent element is reached (Link). Sticky positioning can be thought of

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

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

How can I easily make a text title in the middle of an image

阅读更多关于 How can I easily make a text title in the middle of an image

问题 Okay so I have been doing some renovations to my website and I am trying to make it so on the home page you see several images and what I want to happen is that when you hover over the image it blurs and and text appears in the center of the image . I've been able to make the images blur but the thing is is that all the tutorials and Q&A on Forums that I've found use absolute positioning. When I do that though I end up with all the images stacked on top of each other. I then put divs around

Hiding div behind its parent?

阅读更多关于 Hiding div behind its parent?

问题 <div class="content-wrapper"> <div class="popup"> <div class="close"> </div> </div> </div> .content-wrapper is relatively positioned and contains all the page content (not just the popup). .popup is absolutely positioned. .close is also absolutely positioned. I have some javascript to move close when the cursor enters popup (so I have a nice close bar appear out the side). The best way I have found to do this is just to move using jQuery animate. Hiding/showing creates a stuttering affect

set width of fixed div equal to that of parent width (which is declared as percentage)

阅读更多关于 set width of fixed div equal to that of parent width (which is declared as percentage)

问题 I want to have the width of a position: fixed div (because I want it to be able independently of page scrolling) equal to the width of its parent ( a td element ). However I cannot seem to achieve that. My current code is: html: <table style="width: 90%; border: 1px solid black;"> <tr> <td id='tdLeft'> fdsfsdfsd<br><br><br><br><br><br><br><br><br> fdsfsdfsd<br><br><br><br><br><br><br><br><br> fdsfsdfsd<br><br><br><br><br><br><br><br><br> fdsfsdfsd<br><br><br><br><br><br><br><br><br> fdsfsdfsd