css-position

问题 This question already has answers here : How to center a “position: absolute” element (25 answers) How to center absolutely positioned element in div? (33 answers) How to center absolute div horizontally using CSS? (8 answers) Closed 2 years ago . I have a div, in it there is a button: I let the button position to absolute , and its style code: .buy-btn { text-align: center; position: absolute; bottom: 10px; } How can I align it to center? I tried add margin: 0 auto; , but it not work. 回答1:

问题 I recently played around with html5 and came across the idea to use a fullscreen video as the websites' background using the following html-code: <video id = "video_background" preload = "auto" autoplay = "true" loop = "loop"> <source src = "videos/football.mp4" type = "video/mp4" /> </video> Additionally, I used the following css-code to align it properly: #video_background{ position: absolute; bottom: 0px; right: 0px; min-width: 100%; min-height: 100%; max-width: 4000%; max-height:4000%;

问题 I recently played around with html5 and came across the idea to use a fullscreen video as the websites' background using the following html-code: <video id = "video_background" preload = "auto" autoplay = "true" loop = "loop"> <source src = "videos/football.mp4" type = "video/mp4" /> </video> Additionally, I used the following css-code to align it properly: #video_background{ position: absolute; bottom: 0px; right: 0px; min-width: 100%; min-height: 100%; max-width: 4000%; max-height:4000%;

问题 What's the recommended & most elegant way of getting rid of the gap caused by position:relative? I have a front page and want to put a banner that will be partially above the header and content section, but using position:relative produces an empty area... See example ( I want the text to be just below the red box ): http://jsfiddle.net/Ru2CT/ I know I could create another relative positioned div as a parent of my text, but then I'll still have the gap but between content section & footer...

问题 My example: http://jsfiddle.net/kwnk8qup/ My code: <div id="container" style="position:relative;margin-top:50px;margin-left:50px;width:200px;height:300px;border: 2px solid red;"> <div id="container1" style="position:absolute;margin-top:130px;margin-left:30px;width:50px;height:50px;border: 2px solid #a1a1a1;"> </div> </div> The container (parent div) position is relative container1 (child) position is absolute. I set the container2 top location as 130px , it can be calculated from container

问题 My example: http://jsfiddle.net/kwnk8qup/ My code: <div id="container" style="position:relative;margin-top:50px;margin-left:50px;width:200px;height:300px;border: 2px solid red;"> <div id="container1" style="position:absolute;margin-top:130px;margin-left:30px;width:50px;height:50px;border: 2px solid #a1a1a1;"> </div> </div> The container (parent div) position is relative container1 (child) position is absolute. I set the container2 top location as 130px , it can be calculated from container

问题 There is a html code https://jsfiddle.net/1t68bfex/ button { position: relative; top: 100px; left: 150px; max-top: 10px; } .third-party-block { //display: none; } <div style="border:1px solid red;"> <button> The text from the left is beautiful </button> <div class="third-party-block"> <p> some text comes here </p> <p> some text comes here </p> <p> some text comes here </p> <p> some text comes here </p> </div> </div> The problem here is the third-party-block is dynamic and if it is not

问题 I have a DIV with position:absolute inside another with position:relative. But the inside DIV is flowing out of the other and positioning it self based on the browser not the containing DIV. Any ideas why this is happening? You can see the problem here: https://www.luxedesignerhandbags.com/Articles.asp?ID=239 Look at the botton right "Get Cash for your handbags" The image is in div id="sell_bag" and that is contained in div id="wrapper" The css is as follows: #wrapper { position:inherit; font

问题 jsfiddle The above snippet renders the way I intend it in Chrome (v.20). However in Firefox 11 and IE 9 the 2nd and 3rd content divs do not appear to take into account top and left CSS values. What is the correct method of relative positioning with percentage widths? 回答1: I your case container doesn't have height. You can use this: body, html { min-height: 100%; height: 100%; } 来源： https://stackoverflow.com/questions/11777293/relative-positioning-with-percentage-values-in-top-property

问题 Okay, so I know there are a few questions similar to this on StackOverflow which already have been answered but they didn't help me. I am building a messaging service and for that I have two divs, contacts_box (300px) and message_box (500px). They are both wrapped inside a parent div which is 800px in width . I want align these two divs side by side inside the parent div . But no matter what I do, I just can't get them to align! Please take a look at my HTML and CSS and show where I am going