css-position

问题 I am new to CSS and HTML, and I'm trying to create a simple HTML page. So about the implementation : I have a main div called container with relative positioning. Inside this main div, I have 3 more div's: header- positioned absolute with top: 0px, menu- also absolute, footer- absolute with bottom: 0px. My main problem is about the content div which is placed between menu div and the footer. If this content div has much information, its height becomes larger than the main div(container), and

问题 My CSS-fu is letting me down here: What I'd like to do is position two child divs (with variable heights) to be overlapping. Using: position: absolute; top: 0px; left: 0px; is the only way I know how, with the parent set to position: relative . The problem with this is that the child divs are taken out of the layout as per the CSS spec, shrinking the parent div to height: 0px, so that I can't clear that div and put any content below. My amazing ASCII art below details what I'm going for...

问题 I have a widget which unfortunately doesn't display well on Dolphin lite browsers since position:fixed is not supported. The user agent string I see is : Mozilla/5.0 (Linux; U; Android 2.2.1; iw-il; X10i TripNMiUI Build/NI1063) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1 How can I use this to identify dolphin browsers (any version) ? Or is there another way to do that? Alternatively I found a code that checks for position=fixed support but it looks risky to

问题 I'm trying to place two images on top of each other, with both of the images horizontally and vertically centered inside their container. One of the images will be have its opacity animated to reveal the image underneath. The images are both the same size, but I don't know the size of the images beforehand. I also would like to do this in just pure CSS and HTML. Here is what I ended up with. .data-box{ border: 2px solid #d4d4d4; border-radius: 3px; display: flex; height: 120px; margin: 5px;

问题 I'm pulling my hair out with this one. I have an HTML5 Video element containing an mp4, ogg, and an embedded mp4 fallback. On the embed fallback (IE8), nothing I have come across has allowed me to structure the fixed positioned element (#fixed) above it with z-indexing. Am I missing something? Or is it even possible? My markup: <div id="fixed"></div> <video width="320" height="240" controls> <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4"> <source src="http://www

问题 On Mozilla this pen works. But when I switch to Chrome it breaks. It's just me or something is wrong with browsers? .container { height: 500px; width: 500px; background-color: beige; display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr; } .container h2 { position: absolute; justify-self: center; align-self: center; grid-row: 1; grid-column: 1; } <div class="container"> <h2>TEXT</h2> </div> codepen LINK 回答1: It appears that Chrome has deviated from spec guidance on this issue.

问题 I have a somewhat complex HTML document that contains different elements with position: sticky . These elements are on different levels in the hierarchy: there are several sticky sidebars, several headers where the lower header "pushes away" the upper header when the user scrolls up, etc. With some of these elements, position: sticky works okay, but other elements behave like position: relative . There seems to be some connection to the hierarchy level and to the parent elements: on some

问题 I'm just curious as to what the maximum value you can enter for something like absolute positioning and for it to still be fully honoured by the browser (let's say modern-ish, so IE8+): .foo { left: 9999px; } After having a search around I stumbled across this answer which say's there is (virtually) no limit to what you can have as a z-index value, however I would think that these two properties work differently. Also, what impact might this have on performance? 回答1: According to the test

问题 I' m at this point stuck : I want to have a scrollview + a fixed button at the bottom, but Programatically Way ! I can' t go with XML for some technical reason. Actually i have this : //Is it really usefull Relative View? RelativeLayout layout = new RelativeLayout(this); ScrollView sv = new ScrollView(this); sv.setId(2); // What is it? RelativeLayout.LayoutParams? RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams( RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout

问题 css is a marvelous thing except when you are blocked and you haven't had your ahaha moment . Today I am having trouble to scale the height of my parent div containing a relative positioned element to the proper height. This is because the children is using a top property. Now I know how top works on relative positioned element and I understand why it does not contains the proper height value. What I want to know is: "Is it possible to include this top property in the height of my parent