css-position

问题 What follows is a long explanation, but it's the only way to effectively communicate the issue I'm trying to resolve... I am (somewhat desperately, and entirely unsuccessfully) trying to overlay divs without the use of absolute positioning. The need stems from a paypal cart that I place on the site via a Javascript. The cart's natural position is hard against the top margin of the webpage (not its containing div, which is #wpPayPal , or the wrapper for this div, #main ). The script's author

问题 within a parent element position relative, i include position absolute in an p element but the "p" element not moving when i include “top” position..look at the code below.. <div class="btnClass"> <p>ghghg</p> </div> and the css - .btnClass{ position: relative; } p{ position: absolute; top: 20%;/*this is not working*/ left: 15%; border: 1px solid red; display: block; } 回答1: The parent btnClass need a height Note, a div 's width defaults to browser viewport, its height by its content or

问题 In order to understand what does a block formatting context do, I'm trying to find out what's going on when a BFC is not created. I took the following demo from Everything you Know about Clearfix is Wrong: .wrapper { width: 740px; background: #cccccc; } .leftSidebar { float: left; width: 200px; } .rightSidebar { float: right; width: 200px; } .mainContent { padding-right: 200px; padding-left: 200px; } .floatMe { float: left; background: teal; color: #fff; } <div class="wrapper"> <div class=

问题 I'd like an elegant way to "collect" multi-level headers at the top of the window as the user scrolls, and position:sticky gets me 90% of the way there. The snippet below works just as I'd like it to with one exception: when Header 2b reaches the top, Header 3b is still visible. Since Header 3b is meant to be a "child" of Header 2a, I'd like it to either scroll away or somehow be hidden once Header 2b reaches the top. (Predictably, Header 1b and Header 2d both have the same issue.) I know

问题 I am trying to create a button with "caps" on either end, and a repeating background, in order to keep the button a flexible size. In order to do this, I have used the :before and :after pseudo-elements in CSS, along with position:absolute to get it outside of the main button's background-covered space (using negative values). It works in FF and Chrome, but it looks like in IE8 and 9, the images are there, but are "outside" the button, and therefore are hidden. Does anyone know how to pop

问题 I have a header, mainbody and footer. Header and mainbody are properly styled. Now for footer I want to make it appear behind mainbody, so I used: z-index: -1; position: relative; top: -60px; This gives the desired result, but I get an extra space of 60px at the bottom. How do I clear this extra space? 回答1: Paul is correct. margin-top: -60px; instead of top: -60px; . Another possible solution would be to set the "mainbody" to position: relative; then to use position: absolute; bottom: 60px;

问题 For instance, I would like to create a template like in the image below. How do you position each div inside the container to its absolute position? I would prefer without needing to use float-attributes. Any short examples would be appreciated. 回答1: You can use absolute and relative positioning. for example html <div id="container" class="box"> <div class="box top left"></div> <div class="box top center"></div> <div class="box top right"></div> <div class="box middle left"></div> <div class=

问题 I have a layer with an image inside: <div id="foo"><img src="url" /></div> and it is fixed positioned: #foo { position: fixed; } but I also want the layer to be horizontally centered in the page. So I've tried: http://jsfiddle.net/2BG9X/ #foo { position: fixed; margin: auto } and http://jsfiddle.net/2BG9X/1/ #foo { position: fixed; left: auto; } but doesn't work. Any idea of how to achieve it? 回答1: When you position an element to fixed , it gets out of the document flow, where even margin:

问题 I have actually two issues, but lets resolve the primary issue first as I believe the other is easier to address. I have a fixed position div on the left side of the scroll for a menu. Right side is a standard div that scrolls properly. The issue is that when the browser view-port is too small to see the entire menu.. there is no way to get it to scroll that I can find (at least not with css). I've tried using different overflows in css, but nothing makes the div scroll. The div that contains

问题 I'd like to make a menubar, which is fixed on the top of the page while scrolling. Something like the top menu in Facebook. Also, I want a div holding the logo float at the left of menubar, and a nav float at the right of the menubar. 回答1: This should get you started <div class="menuBar"> <img class="logo" src="logo.jpg"/> <div class="nav"> <ul> <li>Menu1</li> <li>Menu 2</li> <li>Menu 3</li> </ul> </div> </div> body{ margin-top:50px;} .menuBar{ width:100%; height:50px; display:block; position