css-position | 易学教程

How do I vertically center align a position:relative element?

阅读更多关于 How do I vertically center align a position:relative element?

问题 How do I vertically center align the parent container to the canvas which has position:relative ? The parent container has a child element with position:absolute . The child element has been positioned in the center of the parent container. Here's a snippet: .container { position: relative; width: 300px; height: 300px; background-color: red; margin: auto; } .item { position: absolute; width: 100px; height: 100px; background-color: blue; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }

Position one element relative to another in CSS

阅读更多关于 Position one element relative to another in CSS

问题 I want to position four div s relative to another. I have a rectangle div , and I want to insert 4 div s at its corners. I know that CSS has an attribute "position:relative" , but this is relative to the normal position of that element. I want to position my div s not relative to their normal position, but relative to another element (the rectangle). What should I do? 回答1: I would suggest using absolute positioning within the element. I've created this to help you visualize it a bit. #parent

How to use CSS position sticky to keep a sidebar visible with Bootstrap 4

阅读更多关于 How to use CSS position sticky to keep a sidebar visible with Bootstrap 4

I have a two columns layout like this: <div class="row"> <div class="col-xs-8 content"> </div> <div class="col-xs-4"> </div> </div> If I set the position:sticky to the sidebar column, I get the sticky behaviour of the sidebar: https://codepen.io/marcanuy/pen/YWYZEp CSS: .sticky { position: sticky; top: 10px; } HTML: <div class="row"> <div class="col-xs-8 content"> </div> <div class="col-xs-4 sticky"> </div> </div> But when I set the sticky property only to the menu that is located in the sidebar, so the related articles section scrolls normally and gets the sticky behaviour with the menu div ,

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:0px; top:10px; width:100px; height:100px; background:yellow; z-index:4; } When you set position:

problem with absolute positioning in firefox and chrome

阅读更多关于 problem with absolute positioning in firefox and chrome

问题 I don't understand why FF and Chrome render my page differently. Here's a screenie of it in firefox: firefox example http://grab.by/65Bn and here's one in chrome chrome: chrome example http://grab.by/65BB fieldset has a relative position and the image has an absolute position. here's the basic structure: <fieldset class="passenger-info"> <legend>Passenger 1</legend> <div class="remove-me"> <img src="/images/delete-icon-sm.png" /> </div> </fieldset> basically the image is declared right after

What does “top: 0; left: 0; bottom: 0; right: 0;” mean?

阅读更多关于 What does “top: 0; left: 0; bottom: 0; right: 0;” mean?

I am reading a guide from this site about a technique on centering elements. I read the CSS code, .Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } And I read the explanation too. But what I don't understand is the part that explains "top: 0; left: 0; bottom: 0; right: 0;". It says, Setting top: 0; left: 0; bottom: 0; right: 0; gives the browser a new bounding box for the block. At this point the block will fill all available space in its offset parent, which is the body or position: relative; container. Developer.mozilla.org: For absolutely

How can I make the contents of a fixed element scrollable only when it exceeds the height of the viewport?

阅读更多关于 How can I make the contents of a fixed element scrollable only when it exceeds the height of the viewport?

I have a div positioned fixed on the left side of a web page, containing menu and navigation links. It has no height set from css, the content determines the height, the width is fixed. The problem is that if the content is too much, the div will be larger than the window's height, and part of the content will not be visible. (Scrolling the window doesn't help, since the position is fixed and the div won't scroll.) I tried to set overflow-y:auto; but that doesn't help either, the div doesn't seem to notice that part of it is outside of the window. How can I make it's contents scrollable only,

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 enough the opposite change (from fixed to whatever else) is performed without issues. A working example can

CSS: Top vs Margin-top

阅读更多关于 CSS: Top vs Margin-top

I'm not sure if I fully understand the difference between these two. Can someone explain why I would use one over the other and how they differ? Dave top is for tweak an element with use of position property. margin-top is for measuring the external distance to the element, in relation to the previous one. Also, top behavior can differ depending on the type of position, absolute , relative or fixed . You'd use margin, if you wanted to move a (block) element away from other elements in the document flow. That means it'd push the following elements away / further down. Be aware that vertical

In jQuery how can I set “top,left” properties of an element with position values relative to the parent and not the document?

阅读更多关于 In jQuery how can I set “top,left” properties of an element with position values relative to the parent and not the document?

问题 .offset([coordinates]) method set the coordinates of an element but only relative to the document. Then how can I set coordinates of an element but relative to the parent? I found that .position() method get only "top,left" values relative to the parent, but it doesn't set any values. I tried with $("#mydiv").css({top: 200, left: 200}); but does not work. 回答1: To set the position relative to the parent you need to set the position:relative of parent and position:absolute of the element $("