positioning

问题 Yes, I know doesn't work with position absolute, but is there a way to display elements "below" (after in code) not behind them? Example: <img src="image.jpg" style="width: 500px; height: 400px; position: absolute; top: 0;" /> <h2 style="padding: 15px" >This text is behind not below the image</h2> Is there a way of displaying the h2 below the image excepting positioning it absolutely too? Example: http://jsfiddle.net/fDGHU/1/ (yes, I have to use absolute in my case, and dynamic margined

问题 I am trying to build a simple slideshow. So far, the basic markup looks like this: <h1>My Slideshow</h1> <p>This paragraph behaves as expected.</p> <div class="slide-container"> <div class="slide"> <h2>First Slide</h2> <p>Some stuff on this slide…</p> </div> <div class="slide"> <h2>Second Slide</h2> <p>And some more stuff here…</p> </div> </div> <p>This paragraph will disappear beneath the stacked images.</p> This is the corresponding CSS: .slide-container { position: relative; } .slide {

问题 I want the height of a container element, including margins and paddings. When I hover over the element in Chrome development tool, I get the value that I'm looking for but when I use jQuery $('element').outerHeight(true) ; I get a much smaller value. The element contains a jQuery carousel (in a container with position:relative and items position: absolute ), could that have something to do with it? Thanks in advance 回答1: I have experience this issue several times, and the best solution,

问题 So, essentially, I'd like to have an item that is fixed to the the bottom of the page, but when the view scrolls horizontally, it should horizontally scroll too. I can hack out a means of doing this with JavaScript, but is there any CSS way to do it? I don't mind a few extra DIVs here and there. 回答1: CSS part: #footer { position:fixed; bottom:0px; left:0px } jQuery part: $(window).scroll(function(){ $('#footer').css('left','-'+$(window).scrollLeft()+'px'); }); 回答2: Really the jQuery part must

问题 I have multiple unordered lists (UL) elements. Please check the image below: what I want to do is float the ULs next to each other. The ULs have different lenghts of content (LIs), therefore some UL are longer than other. When I float ULs next to each other in a limited width div layer, at some point the last ULs float at the bottom / left. However... if there's a UL that is longer there will be some space. I wish the ULs to float left and to stack to each other, at the bottom of each UL

问题 Instead of scrolling down the page to view a bunch of divs, I would like them to overlay in the same place-- one stacked on top the next -- when you scroll. So, you would scroll down, but the page would not go down. Instead, the next div would overlay the first and so on and so forth. Not sure how to do this? Here is what I have: UPDATE .container { width:100%; height:100%; position:relative; } .container1 { display:block; position:fixed; margin-top:690px; width:100%; height:500px; z-index:1;

问题 Instead of scrolling down the page to view a bunch of divs, I would like them to overlay in the same place-- one stacked on top the next -- when you scroll. So, you would scroll down, but the page would not go down. Instead, the next div would overlay the first and so on and so forth. Not sure how to do this? Here is what I have: UPDATE .container { width:100%; height:100%; position:relative; } .container1 { display:block; position:fixed; margin-top:690px; width:100%; height:500px; z-index:1;

问题 Does anyone know how to make jQuery masonry stack from the bottom up? I wrote some rudimentary JS to stack things from bottom up but it couldn't do masonryish stuff like stacking the next brick on the shortest column and bricks that span multiple columns. Since I'm not good with Math, looking at the source code just makes me dizzy. Anyone want to try? 回答1: You're going to laugh at how easy this is to do, but you will need to modify the plugin (demo). Basically, I changed line 82 - 85 from

问题 I'm having a strange problem positioning a set of divs inside another div. I think it will be best to describe it with an image: Inside the black (#box) div there are two divs (.a, .b) that have to positioned in the same place. What I'm trying to achieve is pictured in the first image, second one is the effect I get. It looks like if the divs were floated without clearing or something, which is obviously not the case. Any ideas would be welcome! Here's the code for this sample: CSS: #box {

问题 I am trying to do positioning in JavaScript. I am using a cumulative position function based on the classic quirksmode function that sums offsetTop and offsetLeft for each offsetParent until the top node. However, I am running into an issue where the element I'm interested in has no offsetParent in Firefox. In IE offsetParent exists, but offsetTop and offsetLeft all sum up to 0, so it has the same problem in effect as in Firefox. What would cause an element that is clearly visible and usable