Question

所以，我试图将这个按钮放在文本中，但是它将封面图像向下移动并留下空白的空间图像，它应该在图像中，而不是让她向下移动

代码：

    <div class="covernebitno">
    <div class="avatar-profil"><a href="/index.php?action=profile">', $context['member']['avatar']['image'], '</a></center></div>
        <div class="usercover">
        <div class="dodajme-profil">
                <div class="profildugmad">  
        <a href="index.php?action=register" id="regsubmit">Send Message</a></br>
        <a href="http://noobot.info/uploader" id="regsubmit">Image Upload</a>
        </div>

<div class="informacije">

<p>'.$context['member']['name'].'</br><span class="bojeipticice">'.(!empty($context['member']['group']) ? $context['member']['group'] : $context['member']['post_group']). '</p>                    
    <img src="http://i.imgur.com/U0TijfL.jpg" />

    <div class="covernebitno">

    </div></div></div>

            ';


css

.usercover 
 {
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 60%, rgba(0,0,0,0.6) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 60%,rgba(0,0,0,0.6) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 60%,rgba(0,0,0,0.6) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#99000000',GradientType=0 );

    width: 101%;
    height: 250px;
    overflow:hidden;
}

 .usercover img
 {
    top: 0px;
    left: 0px;
    min-width: 100%;
    min-height: 250px;

    user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}

.covernebitno {
    border: 1px solid #DBDBDB;
    height: 250px;
    overflow: hidden;
    position: relative;
}

.avatar-profil img {
    min-height: 100px;
    min-width: 100px;
    max-height: 100px;
    max-width: 100px;
    border: 1px solid #fff;
    position: absolute;
    margin-top: 135px;
    margin-left: 13px;
}

.informacije p
{
    font-size: 15px;
    margin-top: 145px;
    margin-left: 135px;
    color: white;
    position: absolute;
}

.bojeipticice
{
    color: #696096;
}

.statusigraca
{
    color: #77513E;
}

.profildugmad
{
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.dodajme-profil {
    position: absolute;
    right: 5px;
    bottom: 5px;
}

Answer 1

尝试在图片上设置position: relative;，在按钮上设置position: absolute; z-index:999; top: 50px; left:50px;

在div中定位按钮

1 个答案: