css-position | 易学教程

How to make div fixed after you scroll to that div?

阅读更多关于 How to make div fixed after you scroll to that div?

How to make a div remain fixed after you scroll to that div ? I have a div that is later in a page and you need to scroll to get to that div . If I use: .divname { position: fixed; } The div will appear before it should appear normally. Maybe a good example of what I need is second ad on 9gag . If your screen resolution is low enough, you won't see that ad after you load the front page, but after you scroll down, you'll see the second ad and it will remain fixed while you scroll down. I know this is tagged html/css only, but you can't do that with css only. Easiest way will be using some

What are the default top, left, botton or right values when position:absolute is used?

阅读更多关于 What are the default top, left, botton or right values when position:absolute is used?

In a big project, few buttons were misalligned in IE. I found a fix by coincidence, by setting position: absolute without any parameters. It made me wonder, what are the default values of such position? I understand how absolute positioning works and what containing element means. But I don't know where the default values come from. They are definitely not top:0; left:0 which I originally expected. <!DOCTYPE html> <html> <head> <style> h1 { position:absolute; } </style> </head> <body> <h1>Absoulute pos</h1> <p>Paragraph</p> </body> </html> Here is a simple page, and this is how final

WPF WebBrowser Control - position:fixed Element jumps while scrolling (Windows 8)

阅读更多关于 WPF WebBrowser Control - position:fixed Element jumps while scrolling (Windows 8)

We use the WPF WebBrowser control to display an embedded page. On Windows 8 we observe a strange jumping behavior of elements with css position:fixed while scrolling. The same page works fine in IE10 on Windows 8 (also FF, Chrome) and in the WPF WebBrowser control on Windows 7. Has anyone seen this behavior before and knows a fix for the jumping motion? Is it possible the .NET Version 4.5 used on the test machine (Surface with Win 8) be the Problem as compared to the .Net Version 4 on the dev machine? The Development Environment: Windows 7 Microsoft Visual Studio 2010 Version 10.0.30319.1

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-thing-not-working-on-ie { position: sticky; bottom: 0; right: 0; background: rgba(0, 211, 211, 0.6); } <script src=

Why does `overflow:hidden` prevent `position:sticky` from working?

阅读更多关于 Why does `overflow:hidden` prevent `position:sticky` from working?

In the following snippet, there is a sticky div positioned inside a container. It sticks to the top of the scrolling panel while staying inside its container all the time. This is the same behavior as that of the UITableView headers on iOS, where the headers stay visible until the next header is at the top. In the second snippet, everything is the same except that the container has an overflow:hidden CSS rule. This seems to prevent the position:sticky behavior from working correctly. .parent { position: relative; background: #ccc; width: 500px; height: 150px; overflow: auto; margin-bottom:

center aligning a fixed position div

阅读更多关于 center aligning a fixed position div

问题 I'm trying to get a div that has position:fixed center aligned on my page. I've always been able to do it with absolutely positioned divs using this "hack" left: 50%; width: 400px; margin-left:-200px ...where the value for margin-left is half the width of the div. This doesn't seem to work for fixed position divs, instead it just places them with their left-most corner at 50% and ignores the margin-left declaration. Any ideas of how to fix this so I can center align fixed positioned elements?

iOS 9 Safari: changing an element to fixed position while scrolling won't paint until scroll stops

阅读更多关于 iOS 9 Safari: changing an element to fixed position while scrolling won't paint until scroll stops

问题 I've been developing a site and taking advantage from the rather good jQuery Sticky Kit plugin. It operates by switching the position property to fixed and back when appropriate. Runs very smoothly in desktop and acceptably so in mobile. Or at least it used to. iOS 9 comes with a new behavior: if the position of an element changes from static / relative / absolute to fixed while the scroll animation is ongoing the element becomes invisible until after the scroll has come to a stop. Oddly

position relative in firefox [duplicate]

阅读更多关于 position relative in firefox [duplicate]

问题 Possible Duplicate: Does Firefox support position: relative on table elements? Here is an example: full-width menu as a table and ul-s as dropdown menus. http://cssdesk.com/dW7WS Works fine in ie and opera, but in firefox dropdown uls streched on whole screen! Any help? 回答1: position: relative does not work on table cells ( <td> or display: table-cell ). From the spec: http://www.w3.org/TR/CSS21/visuren.html#propdef-position The effect of 'position:relative' on table-row-group, table-header

how to use z-index with relative positioning?

阅读更多关于 how to use z-index with relative positioning?

问题 I have a problem with z-index and my code. I want to have a popup on every row, positioned relative to that row. So I created this code: <div class="level1"> <div class="level2"> <input type="text" value="test1" /> <div class="popup">test1</div> </div> <div class="level2"> <input type="text" value="test2" /> <div class="popup">test2</div> </div> </div> with te following style .level1 { position:relative; z-index:2; } .level2 { position:relative; z-index:3; } .popup { position:absolute; left

How to work with ellipsis in bootstrap responsive table

阅读更多关于 How to work with ellipsis in bootstrap responsive table

问题 In a responsive table text-overflow:ellipsis is not working when the data increases in the th (as the col-xs-2 width increases). Code below: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <div class="table-responsive"> <table class="table"> <thead> <tr> <th class="col-xs-2" style="text-overflow: ellipsis;">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</th> <th class="col-xs-1">Firstname</th> <th class="col