css-position | 易学教程

Why does container size depend on absolute-positioned child?

阅读更多关于 Why does container size depend on absolute-positioned child?

I am attempting to build a Skype-like interface with two video boxes: http://jsfiddle.net/q9ER2/20/ <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> html, body { background-color: #000000; height: 100%; font-family: Verdana, Arial, Helvetica, sans-serif; } body { margin: 0; padding: 0; } #videoContainer { position: relative; max-width: 800px; } #bigRemote { /* Shrink if necessary */ max-width: 100%; max-height: 100%; } #smallLocal { position: absolute; height: 30%; width: 30%; bottom: 0; right: 0; } </style> </head> <body

Sticky Headers with -webkit-overflow-scrolling CSS

阅读更多关于 Sticky Headers with -webkit-overflow-scrolling CSS

Using a modified jQuery plugin we have developed a sticky headers scrolling box to imitate the native functionality on iOS in native apps with a cross browser solution that will work on all computers. Here is the FIDDLE: http://jsfiddle.net/f3y9s/1/ Everything is working including on iOS. Going further I would like to implement the native smoothing of iOS as well using -webkit-overflow-scrolling:touch. The problem is that this is causing the header to relocate once the scroll is complete rather than whilst scrolling is taking place. Is there any way to fix this. Here is the FIDDLE: http:/

Mouseover triggered on absolute positioned div

阅读更多关于 Mouseover triggered on absolute positioned div

Objective Have a small magnifying glass icon that appears in the top right corner of a table cell when the table cell is hovered over. Mousing over the magnifying glass icon and clicking it will open a dialog window to show detailed information about the item in that particular table cell. I want to reuse the same icon for hundreds of table cells without recreating it each time. Partial Solution Have a single <span> that is absolutely positioned and hidden. When a _previewable table cell is hovered, the <span> is moved to the correct location and shown. This <span> is also moved in the DOM to

How do I get a vertical scroll bar on an inner div contained in a fixed dimension outer div?

阅读更多关于 How do I get a vertical scroll bar on an inner div contained in a fixed dimension outer div?

I'm looking for an HTML/CSS solution where an inner DIV has the following characteristics: MUST HAVE: is included within a fixed height container div below a variable height sibling header div. fills available variable height with no max-height CSS property scrolls vertically if necessary to accommodate content is within a document having DOCTYPE = HTML 4.01 strict (preferably, HTML 5 if necessary) is multi-browser compatible (Chrome, Firefox, IE, Safari, mobile-phone browsers) WOULD LIKE TO HAVE: does not use tables does not use JavaScript So far, I have the following partial solutions:

Break an absolutely positioned element out of its relatively positioned ancestor?

阅读更多关于 Break an absolutely positioned element out of its relatively positioned ancestor?

问题 Suppose I have a document like <style type="text/css"> div { border:1px solid; padding:15px; } #i_am_relatively_positioned{ background-color:#fcc; margin:50px; padding:50px; position:relative; } #inner { background-color:#cfc; } #i_want_to_be_absolute_to_body{ background-color:#ccf; left:0; position:absolute; top:0; } </style> <body> <div id="i_am_relatively_positioned"> <div id="inner">inner</div> <div id="i_want_to_be_absolute_to_body">absolute to body</div> </div> </body> Is there a way to

Move Mouse - VBScript and Excel Macro

阅读更多关于 Move Mouse - VBScript and Excel Macro

Found a script that uses Excel to move the mouse in VBScript. This is almost exactly what I am looking for for my project, however I need to alter a small bit to enable me to enter coordinates in the code for it to move the mouse specifically to those coordinates; the code currently uses the current mouse position and moves from that position - I need to be able to have the mouse move to an ABSOLUTE position, not a RELATIVE one. Here's the VBS code: Option Explicit Dim Excel, GetMessagePos, x, y, Count, Position Set Excel = WScript.CreateObject("Excel.Application") GetMessagePos = Excel

Safari absolute positioned div disappear when scroll

阅读更多关于 Safari absolute positioned div disappear when scroll

I have a sidebar that contains some products filters on an ecommerce website and has an absolute position. It works well on all browsers except for Safari on iPad and iPhone. It randomly disappears when the page scrolls. I have tried to use the -webkit-transform: translate3d(0, 0, 0); trick as reported in many articles and other "tricks", but nothing works for me. (iPad Safari scrolling causes HTML elements to disappear and reappear with a delay) You can see the page at http://www.hardlyeverwornit.com/alexander-mcqueen The sidebar is visible on mobile and iPad by clicking the REFINE SEARCH

jQuery UI Drag/Drop, snap to bottom

阅读更多关于 jQuery UI Drag/Drop, snap to bottom

So, based on this answer , I've got a set of divs that can drag/drop and snap into place. The only problem is, the draggable divs have different heights, and I need them to always snap to the bottom of the target, instead of the top. You can see a demo of the markup and the problem I'm having in this JsFiddle . The markup is like this:  <div class="devices"> <div class="slot" id="slot_10"> <span class="text">Slot 10</span> </div> <div class="slot" id="slot_9"> <span class="text">Slot 9</span> </div> ... </div>  <div class=

Position fixed on Chrome mobile causing issues when scrolling

阅读更多关于 Position fixed on Chrome mobile causing issues when scrolling

问题 I've been researching this issue for the past hour and saw similar questions but I'm not sure they are the same exact problem. Probably related, somehow, but none of the answers helped me fixed my issue. Take the following code: <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> html, body { height: 100%; margin: 0; } main { background-color: orange; height: 1500px; margin: 50px; } footer { background-color: green; position: fixed; height: 50px; left:

Make position: fixed behavior like sticky (for Vue2)

阅读更多关于 Make position: fixed behavior like sticky (for Vue2)

Position: sticky doesn't support by the most mobile browsers. But position: fixed is not that thing I need (because of fixed block overlaps content in the bottom of document). I guess for jquery it will be easy to set static position for fixed block if we get bottom of document onscroll. But for Vue2 I haven't any idea how to do the same. Give some advice please. Or maybe better solution exists. As I mentioned in the comments, I'd recommend using a polyfill if at all possible. They will have put a lot of effort into getting it right. However, here is a simple take on how you might do it in Vue