css-position

问题 I'm having an odd problem with jQuery draggable this morning, I wonder if anyone else has come across this. I have many small divs inside a large div. They are absolutely positioned: "position:absolute" in CSS for their class, with the actual position itself calculated and set in JS on demand. Now I'm adding functionality to allow these divs to be draggable. But, as soon as I make one draggable, it is given "position:relative" directly on the element, which as you might imagine, seriously

问题 Is it possible to tell the code to position by the center point of an element, rather than by the top-left point? If my parent element has width: 500px; and my child element has /*some width, for this example let's say it's 200px*/ position: absolute; left: 50%; one would assume that based on the 50% positioning, the child element will be in the middle of the parent, leaving 150px of free space on each side. However, it is not, since it is the top-left point of the child that goes to 50% of

问题 I have an element, which has the following CSS: .elem { left: 0; position: fixed; right: 0; width: 60%; z-index: 1000; } The element does not span the whole screen. I would like it to "align" to the right hand side of the screen. This would be easy, if I just removed left: 0 , but I cannot tamper with the above CSS, so I need some CSS or Jquery to override, disable or remove the left:0 CSS. Thanks for help! 回答1: The default value for left is auto , so just set it to that and you will "reset"

问题 There's an issue when accessing my website (http://www.zero11arquitetura.com.br) on iPad or iPhone with iOS 5 that I can´t fix. When window is scrolled thru code every position:fixed elements click event stop working. Can you please help me ? This site structure uses a top menu div and a header div with position: fixed css. When user clicks on a menu item window scrolls horizontally until it reaches its target. Clicking in the menu item is done by jQuery click method on each img tag and

问题 I have a table which I effectively want to have a fixed header and allow the rows in the table to be scrolled through while the header row remains static. In addition, I want the body section of the table to take up the remaining height in the containing element that is left after the header row is rendered. So far I have two tables, the first contains a thead, tr and multiple th, the second contains the tbody with multiple tr each with multiple td, like so: <table> <thead> <tr> <th>Heading 1

问题 I don't understand why my absolutely positioned element appears after my child_static div. I always thought that absolutely positioned elements are taken out of the flow. So why doesn't child_absolute cover the child_static div? .parent { position: relative; } .child_static { height: 20px; background: blue; } .child_absolute { position: absolute; height: 20px; width: 100%; background: green; } <div class='parent'> <div class='child_static'></div> <div class='child_absolute'></div> </div> http

问题 I'm trying to position an element directly above a mobile keyboard. ie: position absolute/fixed to bottom of page, but pushed up by the keyboard (or pushed up equivalent height of the keyboard). Usually this is the opposite behavior of what's desired, and there's to be a lot of people fighting to keep bottom elements in place. I feel like I remember fighting those same battle before... But now that I want it to move, it's not. (of course!) My focus is iOS Safari for now, but would prefer

问题 I would like to have a small red div with full width at a fixed top position, inside another div that has overflow: scroll . I hope the jsFiddle makes it clear: http://jsfiddle.net/mCYLm/2/. The issue is that the red div is overlapping the scrollbar. I guess right: 0 means the right hand side of div.wrapper ; it does not subtract the scrollbar of div.main . When I move the overflow: scroll into div.wrapper , then the red banner has the right size (fiddle). However, it is not at a fixed

问题 I would like to have a small red div with full width at a fixed top position, inside another div that has overflow: scroll . I hope the jsFiddle makes it clear: http://jsfiddle.net/mCYLm/2/. The issue is that the red div is overlapping the scrollbar. I guess right: 0 means the right hand side of div.wrapper ; it does not subtract the scrollbar of div.main . When I move the overflow: scroll into div.wrapper , then the red banner has the right size (fiddle). However, it is not at a fixed

问题 When you try to absolutely position element to tbody , tr and even td you find out it does not work in most browsers. It works as expected in Firefox. Not in IE, Edge and Chrome. position: relative on tbody , tr and even td is ignored. And then first parent with position: relative is used as "anchor" for absolute placing. BTW: position: relative do works when you set tbody to display: block . But then you can be in trouble with widths of table rows. Generally, the child elements no more