开发者

css fixed position on top within wrapper?

开发者 https://www.devze.com 2023-02-08 04:24 出处:网络
I have a #wrapper { margin: 0 auto } centered in the middle. I want to align a div.version inside of that wrapper开发者_如何转开发 at the top right corner (of this wrapper). So the .version div shoul

I have a #wrapper { margin: 0 auto } centered in the middle. I want to align a div.version inside of that wrapper开发者_如何转开发 at the top right corner (of this wrapper). So the .version div should still be inside of the #wrapper.

Which position value do I have to use here?


You can make use of absolute and relative positioning for your divs like this:

#wrapper {
 margin: 0 auto;
 position:relative;
 width:400px;
 background:green;
 clear:both;
 overflow:auto;
 height:100px;
}

.version {
  position:absolute;
  top:0;
  right:0;
  background:blue;
  height:100px;
  width:50px;
}

Check out the DEMO

So, to make an element appear inside another element, you should give parent a position set to relative while any child element a position of absolute :)

Check out the nice article written on the subject at css-tricks.com:

  • Absolute Positioning Inside Relative Positioning

css fixed position on top within wrapper?

0

精彩评论

暂无评论...
验证码 换一张
取 消