css-position | 易学教程

Center a position:fixed element

阅读更多关于 Center a position:fixed element

I would like to make a position: fixed; popup box centered to the screen with a dynamic width and height. I used margin: 5% auto; for this. Without position: fixed; it centers fine horizontally, but not vertically. After adding position: fixed; , it's even not centering horizontally. Here's the complete set: .jqbox_innerhtml { position: fixed; width: 500px; height: 200px; margin: 5% auto; padding: 10px; border: 5px solid #ccc; background-color: #fff; } <div class="jqbox_innerhtml"> This should be inside a horizontally and vertically centered box. </div> How do I center this box in screen with

Absolute positioning inside absolute position

阅读更多关于 Absolute positioning inside absolute position

问题 I have 3 div elements. 1st div is bigger (wrap) and has position:relative; 2nd div is positioned absolute to the 1st div relative positioning (and is included in the 1st div ) 3rd div is contained in the 2nd div and also has absolute positioning. <div id=\"1st\"> <div id=\"2nd\"> <div id=\"3rd\"></div> </div> </div> Why is the 3rd div position absolute to the 2nd div (which is also absolute position to the 1st div ) and not to 1st div that has relative position ? Because the 3rd div is

Position absolute and overflow hidden

阅读更多关于 Position absolute and overflow hidden

问题 We have two DIVs, one embedded in the other. If the outer DIV is not positioned absolute then the inner DIV, which is positioned absolute, does not obey the overflow hidden of the outer DIV (example). Is there any chance to make the inner DIV obey the overflow hidden of the outer DIV without setting the outer DIV to position absolute (cause that will muck up our complete layout)? Also position relative for our inner DIV isn\'t an option as we need to \"grow out\" of a table TD (exmple). Are

Position: sticky buttons not working in IE 11

阅读更多关于 Position: sticky buttons not working in IE 11

问题 I need to make the div containing the buttons sticky, so that the buttons in that div will stay at the bottom as the user scrolls the screen. This is so that the user does not have to scroll all the way down to click on the buttons. The div containing the buttons is all the way down here: <div class=\"form-group sticky-button-thing-not-working-on-ie\"> <div class=\"col-md-offset-2 col-md-10\"> <input type=\"submit\" value=\"Save\" class=\"btn btn-default\" /> </div> </div> .sticky-button

iOS 5 fixed positioning and virtual keyboard

阅读更多关于 iOS 5 fixed positioning and virtual keyboard

问题 I have a mobile website which has a div pinned to the bottom of the screen via position:fixed. All works fine in iOS 5 (I\'m testing on an iPod Touch) until I\'m on a page with a form. When I tap into an input field and the virtual keyboard appears, suddenly the fixed position of my div is lost. The div now scrolls with the page as long as the keyboard is visible. Once I click Done to close the keyboard, the div reverts to its position at the bottom of the screen and obeys the position:fixed

Fixed sidebar navigation in fluid twitter bootstrap 2.0

阅读更多关于 Fixed sidebar navigation in fluid twitter bootstrap 2.0

问题 Is it possible to make sidebar navigation stay always fixed on scroll in fluid layout? 回答1: Note: There is a bootstrap jQuery plugin that does this and so much more that was introduced a few versions after this answer was written (almost two years ago) called Affix. This answer only applies if you are using Bootstrap 2.0.4 or lower. Yes, simply create a new fixed class for your sidebar and add an offset class to your content div to make up for the left margin, like so: CSS .sidebar-nav-fixed

How to make fixed header table inside scrollable div?

阅读更多关于 How to make fixed header table inside scrollable div?

问题 I want to make header of my table fixed. Table is present inside the scrollable div. Below is my code. <div id=\"table-wrapper\"> <div id=\"table-scroll\"> <table bgcolor=\"white\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" id=\"header-fixed\" width=\"100%\" overflow=\"scroll\" class=\"scrollTable\"> <thead> <tr> <th>Order ID</th> <th>Order Date</th> <th>Status</th> <th>Vol Number</th> <th>Bonus Paid</th> <th>Reason for no Bonus</th> </tr> </thead> <tbody> <tr> <td><%=snd.getOrderId()%>

Center a position:fixed element

阅读更多关于 Center a position:fixed element

问题 I would like to make a position: fixed; popup box centered to the screen with a dynamic width and height. I used margin: 5% auto; for this. Without position: fixed; it centers fine horizontally, but not vertically. After adding position: fixed; , it\'s even not centering horizontally. Here\'s the complete set: .jqbox_innerhtml { position: fixed; width: 500px; height: 200px; margin: 5% auto; padding: 10px; border: 5px solid #ccc; background-color: #fff; } <div class=\"jqbox_innerhtml\"> This

Why element with position:sticky doesn't stick to the bottom of parent?

阅读更多关于 Why element with position:sticky doesn't stick to the bottom of parent?

问题 I\'m trying to understand what css \"sticky\" does. I can get it to stick to the \'top\' of its parent, but not to the \'bottom\' My test code is: .block { background: pink; width: 50%; height: 200px; } .move { position: sticky; bottom: 0; } 1111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/> <div class=\"block\"> AAAA <div class=\"move\"> BBBB </div> </div> 222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/> When I have \"move\" set to \'top:0\' it sticks to

CSS-Filter on parent breaks child positioning

阅读更多关于 CSS-Filter on parent breaks child positioning

问题 I am currently working on a website and encountered this weird behaviour. I am not sure if it is a bug or how to deal with it so I\'m asking you guys for help. So I have this title-screen \"animation\" that has the title centered in a fullscreen page and when you scroll down it becomes smaller and remains at the top of the page. Here is a working example with the expected behaviour, from which I stripped all unnecessary code to make it minimal: $(window).scroll( () => { \"use strict\"; let