I can’t move image file anywhere using css

微信扫一扫,分享到朋友圈

I can’t move image file anywhere using css

This is my first time posting here. Been a long time fan coming here every once in a while, hopefully someone can lead me to the right direction. I have an image file that I am unable to move anywhere. The image file is in a div that is in a tag that I want positioned to the bottom right of the div. I have used top-margin and left margin to no avail it is always just sitting there in the same position. Below is the code that pertains to the problematic area. Html part followed by the css part.

#content{ width: 600px; height: 475px; background-color: #FFF; border-style: solid; border-width: 2px; float:left; margin-right:30px; } #monkey_img{ width:500px; height:425px; margin-top:100px; margin-left:100px; display:block; } #container{ width:1000px; height:550px; margin:auto; margin-top:65px; } #container p{ padding:15px; } #sidebar{ width 275px; height:475px; background-color:#FFF; border-style:solid; border-width: 2px; margin-left:30px; overflow:auto; }

Problem courtesy of: NoobCoder

Solution

You’ll probably want to set {position: relative}
on the parent, and {position: absolute}
on the element you’re trying to move. You can then set top/right/bottom/left as you see fit.

http://jsfiddle.net/XemPh/2/

#monkey_img {
    width:200px;
    height:200px;
    background-color: #eee;
    position: relative;
}
#monkey_img img {
    position: absolute;
    right: 0;
    bottom: 0;
}

In this example I’ve applied the styles directly to the image, but you could do the image’s wrapper and that element’s parent as well.

Solution courtesy of: isherwood

微信扫一扫,分享到朋友圈

I can’t move image file anywhere using css

全球首个运营商云VR业务试商用

上一篇

Docker实用技巧之更改软件包源提升构建速度

下一篇

你也可能喜欢

I can’t move image file anywhere using css

长按储存图像,分享给朋友