Div重叠跳转到Bootstrap

时间：2017-05-14 11:18:06

标签： html css twitter-bootstrap

我有一组带有图像的div，它将在我未来的项目中充当导航。我在第一张图片上放了另一个0不透明的彩色div。我希望它在用户悬停div时获得不透明度。我已经添加了相同的类，其大小和位置将鼠标悬停为其父级。我已将位置绝对设置为悬停div并相对于父容器。

问题是：我的div出现在div下面，而不是在它之上，我能用它做什么？

我看过类似的项目（不是Bootstrap构建），而不使用z-index覆盖，但我无法避免它，有什么办法吗？

我想在我的悬停容器顶部显示文字，这是做什么的正确方法 - p，包裹在div中并放入悬停的div？

<!DOCTYPE html>
<html lang="UA-ru">
    <head>
        <title> Portfolio</title>
       <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet"  href="CSS/custom.css" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
    </head>
    <body>
        <div id="rowfirst" class="container-fluid">
        <div class="row" id="allrow">

         <div id="elementUnique" class="col-lg-6 col-md-12 col-sm-12 col-xs-12"><img id="img1"; class="img-responsive" src="https://c1.staticflickr.com/4/3854/33471675672_df4a45ed78_b.jpg"><div class="col-lg-6 col-md-12 col-sm-12 col-xs-12" id="elementUniquehover"></div></div>
            <div id="element1" class="col-lg-3 col-md-6 col-xs-12"><img id="img1"; class="img-responsive" src="https://c1.staticflickr.com/4/3856/15035927740_3c3fd4368d_h.jpg"></div>
            <div id="element2" class=" col-lg-3 col-md-6 col-xs-12"><img id="img2"; class="img-responsive" src="https://c1.staticflickr.com/4/3906/14398449382_5f1d47c281_b.jpg"></div>
            </div>
            <div class="row">
        <div id="element3" class="col-lg-3 col-md-6 col-xs-12"><img id="img3"; class="img-responsive" src="https://c1.staticflickr.com/6/5143/5679564578_8c765d819d_b.jpg"></div>
            <div id="element4" class=" col-lg-3 col-md-6 col-xs-12"><img id="img4"; class="img-responsive" src="https://c1.staticflickr.com/8/7385/9938594544_bd06f9b345_b.jpg"></div>
            <div id="element5" class=" col-lg-3 col-md-6 col-xs-12"><img id="img5"; class="img-responsive" src="https://c1.staticflickr.com/9/8594/15993347406_bb1bb4ef5e_b.jpg"></div>
                  <div id="element6" class=" col-lg-3 col-md-6 col-xs-12"><img id="img6"; class="img-responsive" src="https://c1.staticflickr.com/7/6109/6317119669_93f293eeee_b.jpg"></div>
            </div>


    <nav id="mynavigation" class="navbar navbar-inverse navbar-fixed-bottom">
        <div class="container-fluid">
            <div id="headernav" class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
             <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
                <a class="navbar-brand" href="#">Portfolio</a></div>
            <div class="collapse navbar-collapse" id="myNavbar">
            <div id="navbarul"><ul  class=" nav navbar-nav">
              <li id=webli><a id="navbar">Web</a></li>
                 <li id="videoli"><a id="navbar">Video</a></li>
                 <li id="photoli"><a id="navbar">Photo</a></li>
            </ul>
                </div></div></div></nav>

        </div>
    </body>
</html>

#navbarul{
    width: 20%;
    margin: auto;
    display: block;
   }

@media only screen and (max-width : 768px){
   #webli {
        display:inline;
      margin: 0;
       font-size: 7px;
       padding: 0;
       line-height: 0;
    }
}

@media only screen and (max-width : 768px){
   #videoli {
        display:inline;
       margin: 0;
      font-size: 7px;
       padding: 0;
        line-height: 0;

    }
}

@media only screen and (max-width : 768px){
   #photoli  {
        display:inline;
        margin: 0;
       font-size: 7px;
       padding: 0;
        line-height: 0;

    }
}

@media only screen and (max-width : 768px){
   #photoli  {
        display:inline;
        margin: 0;
       font-size: 7px;
       padding: 0;
        line-height: 0;
        line-height: 0;

    }
}

#navbar{
    display: block;
    font-family: "Abel", sans sans-serif;
   text-transform: uppercase;
    font-size: 2em;
    cursor: pointer; 
 display: inline-block;
    text-align: center;


}

#element1{
    display: block;

  height: 460px;
    padding: 0;
     margin: 0;
}

#element4{
    display: block;

  height:456px;
    padding: 0;
     margin: 0;
}



#img4{
height:100%;

    width: 100%;
    padding: 0;
    margin: 0;
    object-fit: cover;
  }

#element4:hover {
    outline: 5px solid rgb(255,255,77);
    outline-offset: -5px;

}

#element5{
    display: block;

  height:456px;
    padding: 0;
     margin: 0;
}

#img5{
height:100%;

    width: 100%;
    padding: 0;
    margin: 0;
    object-fit: cover;
  }

#element5:hover {
    outline: 5px solid rgb(255,255,77);
    outline-offset: -5px;

}

#element6{
    display: block;

  height:456px;
    padding: 0;
     margin: 0;
}

#img6{
height:100%;

    width: 100%;
    padding: 0;
    margin: 0;
    object-fit: cover;
  }

#element6:hover {
    outline: 5px solid rgb(255,255,77);
    outline-offset: -5px;

}

#element3{
    display: block;

  height:456px;
    padding: 0;
     margin: 0;
}

#img3{
height:100%;

    width: 100%;
    padding: 0;
    margin: 0;
    object-fit: cover;
  }


#element3:hover {
    outline: 5px solid rgb(255,255,77);
    outline-offset: -5px;
    }

#element2{
    display: block;

  height:460px;
    padding: 0;
     margin: 0;
}

#img2{
height:100%;

    width: 100%;
    padding: 0;
    margin: 0;
    object-fit: cover;
  }

#element2:hover {
    outline: 5px solid rgb(255,255,77);
    outline-offset: -5px;

}

#elementUnique{
    display: inline-block;
    position: relative;

    height: 460px;
    padding: 0;
     margin: 0;


   }
#elementUniquehover{
    display: inline-block;
    position: absolute;
    height: 460px;
    padding: 0;
     margin: 0;
     opacity: 0;
    background-color: aqua;
    transition: .5s ease;

   }

#elementUnique:hover #elementUniquehover {
    opacity: 1;
    z-index: 20;
}


#element1:hover {
    outline: 5px solid rgb(255,255,77);
    outline-offset: -5px;

}
#elementUnique:hover{
     outline: solid rgb(255, 255, 77) 5px;
      outline-offset: -5px;
}

#img1{
height:100%;
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    object-fit: cover;
    transition: .5s ease;

  }



#mynavigation{
  height:6% ;
}
  @media only screen and (max-width : 768px) { #mynavigation{
  height:15% ;
}
}
}
#rowfirst{
    width: 100%;
    height: 100%;
    margin: 0;


}

   html {
    height: 100%;

}

body {
    height: 100%;

}

#allrow{
    position: relative;
}




.infotext{
    font-family: 
}

2 个答案:

答案 0 :(得分：0)

设置悬停div 顶部：0; 左：0;

帮助。尽管如此，它只覆盖了图像的一半

答案 1 :(得分：0)

你快到了。你只需要添加

use Symfony\Component\HttpFoundation\Request;

public function createAction(Folder $folder, ConstraintViolationList $violations, Request $request)
{
    $name = $request->request->get('name');
    #do whatever you want with $name now ...

    if (count($violations)) {
        return $this->view($violations, Response::HTTP_BAD_REQUEST);
    }

    $em = $this->getDoctrine()->getManager();
    $em->persist($folder);
    $em->flush();

    return $folder;
}

到你的叠加div，它将与父div完全重叠。祝你好运！

马丁

相关问题
最新问题