Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 布局的概念/常用的定位方式/用相对定位和绝对定位做一个导航栏
Blogger Information
Blog 43
fans 4
comment 0
visits 19395
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
布局的概念/常用的定位方式/用相对定位和绝对定位做一个导航栏
汇享科技
Original
475 people have browsed it

布局的概念

  • 布局的默认方式是文档流布局，文档流就是从上到下根据书写顺序进行展示的布局方式
  • 那么我们想在这个基础上进行打乱就需要改变定位方式脱离出文档流
  • 常用术语：定位元素、最初包含块、参照物
术语名称 描述
定位元素 定位元素的意思就是将默认position的属性转为非static就变成一个定位元素了
最初包含块 也叫定位上下文 固定定位是参照最初包含块进行定位的
参照物 每个元素想进行定位需要根据一个定位元素来进行偏移定位 这个定位元素就是参照物
  • 常用的定位属性：
属性 描述
relative 相对定位：相对于元素在文档流中默认的位置进行定位
absolute 绝对定位：根据最近的定位父级元素进行定位脱离了文档流
fixed 固定定位：总是根据最初包含块进行定位
sticky 粘性定位：参照浏览器视口进行定位

相对定位

  • 根据当前div原来在文档流中的位置进行偏移 top、left、right、bottom默认为0

l5hmgj7a.png

绝对定位

  • 根据最近的定位父元素进行定位

l5hmslzx.png

固定定位

  • 根据最初包含块进行定位

l5hn1bji.png

  • 代码部分
  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.             box-sizing: border-box;
  11.         }
  12.         .die{
  13.             width: 500px;
  14.             height: 500px;
  15.             border: 1px solid #000;
  16.             color: red;
  17.             text-align: center;
  18.         }
  19.         .er1{
  20.             height: 100px;
  21.             background-color: aqua;
  22.             position: relative;
  23.             top: 20px;
  24.             left: 20px;
  25.         }
  26.         .er2{
  27.             height: 100px;
  28.             background-color: blue;
  29.             position: absolute;
  30.         }
  31.         .er3{
  32.             height: 100px;
  33.             background-color: yellow;
  34.             position: fixed;
  35.             top: 50px;
  36.             left: 50px;
  37.         }
  38.     </style>
  39. </head>
  40. <body>
  41.     <div class="die">
  42.         <div class="er1">儿子1 ：相对定位</div>
  43.         <div class="er2">儿子2 ：绝对定位</div>
  44.         <div class="er3">儿子3 ：固定定位</div>
  45.     </div>
  46. </body>

利用固定定位和绝对定位做的导航栏

实例截图：

l5hnfxrd.png

  • css部分代码
  2. /*顶部导航*/
  3. /*设置顶部导航背景色和阴影*/
  4. nav{
  5.     background-color: #fff;
  6.     box-shadow: 0 3px 3px #888;
  7. }
  8. /*设置导航栏宽度*/
  9. .nav{
  10.     width: 1200px;
  11.     /*转为相对定位*/
  12.     position: relative;
  13.     /* 设置居中 */
  14.     left: 50%;
  15.     transform: translateX(-50%);
  16. }
  17. /*设置导航的高度*/
  18. nav .nav{
  19.     height: 90px;
  20. }
  21. /*设置logo图片*/
  22. nav .nav_logo{
  23.     /*转为行内块元素*/
  24.     display: inline-block;
  25.     width: 150px;
  26.     /* 设置为相对定位元素 */
  27.     position: relative;
  28.     top: 25px;
  29.     left: 5px;
  30. }
  31. /*设置内容*/
  32. nav .nav_center{
  33.     width: 830px;
  34.     /* 转为行内块元素 */
  35.     display: inline-block;
  36.     /* 设置为绝对定位 */
  37.     position: absolute;
  38.     top: 32px;
  39.     left: 160px;
  40. }
  41. /*设置内容文本*/
  42. nav .nav_center a{
  43.     margin: 15px;
  44.     font-size: 16px;
  45.     color: #333333;
  46.     font-weight: 700;
  47.     padding: 10px;
  48. }
  49. /*设置鼠标悬浮样式和首页为激活状态*/
  50. nav .nav_center a:hover,nav .nav_center .active{
  51.     font-size: 18px;
  52.     color: red;
  53. }
  54. /* 设置右边部分 */
  55. nav .nav_right{
  56.     /* 转为绝对定位 */
  57.     position: absolute;
  58.     top: 30px;
  59.     right: 15px;
  60.     /*设置为行内块元素*/
  61.     display: inline-block;
  62. }
  63. /*设置搜索框样式*/
  64. nav .nav_right input{
  65.     /* 这里使用相对定位 */
  66.     position: relative;
  67.     width: 220px;
  68.     height: 36px;
  69.     border: none;
  70.     outline: none;
  71.     border-radius: 15px;
  72.     background-color: #f7f8fa;
  73.     margin: 0 0 10px 0;
  74. }
  75. /*设置搜索图标*/
  76. nav .nav_right span{
  77.     /*转为绝对定位*/
  78.     position: absolute;
  79.     top: 10px;
  80.     right: 15px;
  81. }
  • html部分代码
  1.     <nav>
  2.         <div class="nav">
  3.             <div class="nav_logo">
  4.                 <img src="images/logo.png" alt="">
  5.             </div>
  6.             <div class="nav_center">
  7.                 <a href="" class="active">首页</a>
  8.                 <a href="">视频教程</a>
  9.                 <a href="">学习路径</a>
  10.                 <a href="">PHP培训</a>
  11.                 <a href="">资源下载 </a>
  12.                 <a href="">技术文章</a>
  13.                 <a href="">社区</a>
  14.             </div>
  15.             <div class="nav_right">
  16.                 <input type="search" name="" id="" placeholder="请输入关键字搜索">
  17.                 <span class="iconfont icon-sousuo"></span>
  18.             </div>
  19.         </div>
  20.     </nav>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：这个运用的不错
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post