html/css定位相关元素

css中有z-index、top、left、right、bottom、等属性必须有position属性定位方可表现出来。
  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>导航栏-下拉菜单</title>
  6     <!-- <link href="./assets/nav.css" style="text/css" rel="stylesheet"/> -->
  7     <style>
  8     *{
  9     margin: 0;
 10     border: 0;
 11     padding: 0;
 12 }
 13 body{
 14     
 15     background-color: lightgray;
 16 }
 17 .row{
 18     margin: 0 auto;
 19     width: 100%;
 20 }
 21 .head{
 22     height: 60px;
 23 }
 24 .navgation{
 25     background-color: #96b97d;        
 26 }
 27 .col{
 28     width: 60%;
 29     margin: 0 auto;
 30     height: 32px;
 31 }
 32 .col ul{
 33     margin: 0;
 34     list-style: none;
 35 }
 36 .col li{
 37     float: left;
 38     display: block;
 39     white-space: nowrap;
 40     height: 32px;
 41     
 42 }
 43 .col a{
 44     text-decoration: none;
 45     color: #fff;
 46     font-size: 13px;
 47     display: block;
 48     height: 20px;
 49     width: 24px;
 50     padding: 12px 20px 0 20px;
 51 }
 52 .col a:hover{
 53     background-color: gray;
 54 }
 55 .dl{
 56     background-color: #fff;
 57     margin-right: 1px;
 58     border-radius: 3px;
 59     z-index: 1;
 60 }
 61 .dl a{
 62     color: #3c3c3c;    
 63 }
 64 .droplist1{position: absolute; display: none; }
 65 .dropbtn1:hover .droplist1{display: block;}
 66 .dropbtn2{overflow: hidden;}
 67 .dropbtn2:hover {overflow: visible;}
 68 .droplist3{position: absolute; opacity: 0; }
 69 .dropbtn3:hover .droplist3{opacity:1;}
 70 .droplist4{position: absolute; left: -9999px; }
 71 .dropbtn4:hover .droplist4{left:inherit;}
 72 .droplist5{position: absolute; height: 0px; overflow: hidden; transition: height 1s; }
 73 .dropbtn5:hover .droplist5{height: 64px;}
 74 .main{
 75     float: left;
 76     z-index:2;
 77 }
 78     </style>
 79 </head>
 80 <body>
 81     <div class="container">
 82         <div class="row">
 83         <div class="head"></div>
 84         </div>
 85         <div class="row">
 86             <div class="navgation">
 87                 <div class="col">
 88                     <ul>
 89                         <li class="dropbtn1" ><a href="">首页</a>                        
 90                             <div class="droplist1 dl">
 91                             <div class="list"><a href="">首页1</a></div>
 92                             <div class="list"><a href="">首页2</a></div>
 93                             </div>
 94                         </li>
 95                         <li class="dropbtn2" ><a href="">订单</a>
 96                           <div class="droplist2 dl">
 97                             <div class="list"><a href="">订单1</a></div>
 98                             <div class="list"><a href="">订单2</a></div>
 99                           </div>
100                         </li>
101                         <li class="dropbtn3" ><a href="">库存</a>
102                           <div class="droplist3 dl">
103                             <div class="list"><a href="">库存1</a></div>
104                             <div class="list"><a href="">库存2</a></div>
105                           </div>
106                         </li>
107                         <li class="dropbtn4" ><a href="">笔记</a>
108                           <div class="droplist4 dl">
109                             <div class="list"><a href="">笔记1</a></div>
110                             <div class="list"><a href="">笔记2</a></div>
111                           </div>
112                         </li >
113                         <li class="dropbtn5"><a href="">登录</a>
114                           <div class="droplist5 dl">
115                             <div class="list"><a href="">游客</a></div>
116                             <div class="list"><a href="">管理员</a></div>
117                           </div>
118                         </li>
119                     </ul>
120                 </div>                
121             </div>        
122         </div>
123         <div class="main">
124         <h3>这里是文本这里是文本这里是文本这里是文本这里是文本这里是文本这里是文本这里是文本这里是文本这里是文本这里是文本这里是文本这里是文本这里是文本这里是文本这里是文本</h3> 
125         </div>
126     </div>
127 </body>
128 </html>
posted on 2017-10-17 13:54 me77 阅读(156) 评论(0) 收藏举报