简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > css中float浮动、position中相对定位，固定定位和绝对定位
Blogger Information
Blog 28
fans 0
comment 0
visits 25668
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
css中float浮动、position中相对定位，固定定位和绝对定位
，多思曩惜，
Original
797 people have browsed it

css中float属性

  • float属性指定一个盒子或元素是否应该浮动

  • 注意：绝对定位的元素忽略float属性！

  • 常用的值

值 描述
left 元素向左浮动
right 元素向右浮动
none 默认值。元素不浮动，并且显示在其在文本中出现的位置
inherit 规定应该从父元素继承float属性的值 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.     .box1 {
  10.       width: 150px;
  11.       height: 150px;
  12.       background-color: darkcyan;
  13.     }
  15.     .box2 {
  16.       width: 180px;
  17.       height: 180px;
  18.       background-color: yellow;   }
  20.     .box3 {
  21.       width: 150px;
  22.       height: 150px;
  23.       background-color: rgb(65, 61, 122);
  24.     }
  25.     body>div>div:last-of-type {
  26.       height: 50px;
  27.       background-color: rgb(83, 83, 66);
  28.     }
  29.   </style>
  30. </head>
  32. <body style=" border: 1px solid;">
  33.   <div>
  34.     <div class="box1"></div>
  35.     <div class="box2"></div>
  36.     <div class="box3"></div>
  37.     <div></div>
  38.   </div>
  39. </body>
  40. </html>

  • 预览效果

  • 当box1加入float：left样式时，box1在浮动层并覆盖box2了，box2和box3垂直排列

  • 当box2加入float：left样式时，box1和box2一起在浮动层并横向排列，box3被box1覆盖

  • 当box3加入float：right样式时，box1、box2、box3一起在浮动层

  • 当最后一个元素div加入clear:both样式时，它没有被前面的浮动层所影响

position定位

  • position属性指定一个元素（静态的、相对的、绝对或笃定）的定位方法的类型

  • 常用的属性值

值 描述
absolute 生成绝对定位的元素，相对于static定位以为的第一个父元素进行定位。元素的位置通过left,top,right,bootm属性进行规定
fixed 生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过left,top,right,bootm属性进行规定
relative 生成相对定位的元素，相对于其他正常位置进行定位
static 默认值，没有定位，元素会出现在正常的流中
sticky 粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
inherit 规定应该从父元素继承position属性的值
initial 设置该属性为默认值 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Document</title>
  7.   <style>
  8.     * {
  9.       margin: 0;
  10.       padding: 0;
  11.     }
  12.     .box1 {
  13.       width: 400px;
  14.       height: 400px;
  15.       border: 1px solid #000;
  16.     }
  17.     .box2 {
  18.       width: 100px;
  19.       height: 100px;
  20.       background-color: aquamarine;
  21.       border: 1px solid #000;
  22.     }
  23.     .box3 {
  24.       width: 80px;
  25.       height: 80px;
  26.       background-color: wheat;
  27.       border: 1px solid #000;
  28.     }
  29.   </style>
  30. </head>
  31. <body>
  32.   <div class="box1">
  33.     <div class="box2"></div>
  34.     <div class="box3"></div>
  35.   </div>
  36. </body>
  37. </html>

  • 预览效果

  • 当box2添加position:relative;top:50px;left::30px;样式（相对定位于自己的原来位置，还在文档流中。效果如图

  • 当box1添加position:relative样式时（及设置定位父级）,当box2添加position:absolute;top:100px;left:100px;样式（绝对定位：相对于它的定位父级）。效果如图

  • 固定定位

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Document</title>
  7.   <style>
  8.     body {
  9.       height: 1500px;
  10.       background-color: wheat;
  11.     }
  12.     .ads {
  13.       width: 250px;
  14.       height: 250px;
  15.       background-color: cyan;
  16.       /* 固定定位 */
  17.       position: fixed;
  18.       right: 0;
  19.       bottom: 0;
  20.     }
  21.     .ads>button {
  22.       float: right;
  23.       margin-right: 10px;
  24.     }
  25.   </style>
  26. </head>
  27. <body>
  28.   <h1>HELLO PHP.CN</h1>
  29.   <div class="ads">
  30.     <button>关闭</button>
  31.     <h2>这是固定定位</h2>
  32.     <h1>效果预览</h1>
  33.   </div>
  34. </body>
  35. </html>

  • 预览效果

  • 滑动后效果

总结

  • 了解float浮动，position的定位，以及各个效果和差异。
Correcting teacher：天蓬老师天蓬老师

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！