How to overlap a image on a div?_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-09 23:22 出处：网络

I want to place a small circular login image on the border of div such that half image will be outside the border line just for s开发者_JS百科tyle purpose?I think I have to set z-index but how OR is t

相关专题：css z-index

I want to place a small circular login image on the border of div such that half image will be outside the border line just for s开发者_JS百科tyle purpose?I think I have to set z-index but how OR is there any better way?

Thats exactly what you need to do.

Give you img a class name. Then in your style sheet add something like this

#classname  
{
position: absolute;
z-index: 10;
top: #distance from top of page#
left: #distance from left of page#
}

z-index needs to be a number greater than your div which will have an index of 0 if you haven't changed it.

Hope this helps.

.overout {  
text-decoration:none;
position: relative;
z-index: 10;
top: 105px;
right: -25px;
}

You can do this very easily using divs. Consider the following code

<html>
<head><title>Logo test</title></head>
<body>
<div style="position: relative; width: 400px; height: 100px; margin: 0px auto 0px auto; top: 50px; background-color: #f00;">
 <div style="position: relative; height: 100px; width: 100px; background-color: blue; left: 20px; top: -50px;">
 </div>
</div>
</body>
</html>

All you have to do is replace the second divs "background-color" property with the "background-image" property and nest that div inside your existing div. Make sure you make the div the exact size of your logo and set background-repeat: no-repeat;

Hope that helps. Test the example code I posted. You can place all the style information into a css class like this:

.logo
{
   background-image: url(yourlogo.png);
   background-repeat: no-repeat;
   width:  /* width of logo */
   height: /* height of logo */
   top:    /* distance from top */
   left:   /* distance from left */
}