search

博客列表 >相对定位和绝对定位及固定定位

相对定位和绝对定位及固定定位

三九三伏
三九三伏原创
2022年07月13日 09:34:29619浏览

一、相对定位和绝对定位及固定定位

  1. html基础代码
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title></title> 
  9.     <link rel="stylesheet" href="test.css">
  10. </head>
  11. <body>
  12.     <div class="box parent">
  13.         <div class="box child one">child-1:相对定位</div>
  14.         <div class="box child two">child-2:绝对定位</div>
  15.         <div class="box child three">child-3:固定定位</div>
  16.     </div>
  17. </body>
  18. </html>
  20. test.css基础代码
  21. .box{
  22.     border: 1px solid red;
  23. }
  25. .box.parent{
  26.     width: 400px;
  27.     height: 400px;
  28.     background-color: lightcyan;
  29. }
  31. .box.child{
  32.     padding: 20px;
  33. }
  35. .box.child.one{
  36.     background-color: red;
  37. }
  39. .box.child.two{
  40.     background-color: yellow;
  41. }
  43. .box.child.three{
  44.     background-color: green;
  45. }

1. 使用child-1盒子演示相对定位

将child one转为相对定位
在.box.child.one选择器中增加样式值

  1. .box.child.one{
  2.     background-color: red;
  3.     position: relative;
  4. }

child one即转为相对定位

初始效果：

修改child one的top为50px

  1. .box.child.one{
  2.     background-color: red;
  3.     position: relative;
  4.     top: 50px;
  5. }

效果：

修改child one的left为50px

  1. .box.child.one{
  2.     background-color: red;
  3.     position: relative;
  4.     top: 50px;
  5.     left: 50px;
  6. }

效果：

2. 使用child-2盒子演示绝对定位

将child two转为相对定位
在.box.child.two选择器中增加样式值

  1. .box.child.two{
  2.     background-color: yellow;
  3.     position:absolute;
  4. }

观察效果：

使用 display: none;让child-1不再显示。

  1. .box.child.one{
  2.     background-color: red;
  3.     position: relative;
  4.     display: none;
  5. }

观察效果：

box parent选择器的增加样式position: relative;
body设置高度和边框
将clild-2绝对定位修改到右下角，以观察绝对定位的父级元素。

  1. body{
  2.     height: 500px;
  3.     border: 1px solid blue;
  4. }
  5. .box.parent{
  6.     width: 400px;
  7.     height: 400px;
  8.     background-color: lightcyan;
  9.     position: relative;
  10. }
  11. .box.child.two{
  12.     background-color: yellow;
  13.     position:absolute;
  14.     right: 0;
  15.     bottom: 0;
  16. }

效果如下：

去掉box parent的定位属性

  1. .box.parent{
  2.     width: 400px;
  3.     height: 400px;
  4.     background-color: lightcyan;
  5.     position: static;
  6. }

观察效果：

打开body的定位属性

  1. body{
  2.     height: 500px;
  3.     border: 1px solid blue;
  4.     position: relative;
  5. }

观察效果：

将body去掉可定位属性，将HTML加上可定位属性

  1. html{
  2.     height: 600px;
  3.     border: 1px dashed coral;
  4.     position: relative;
  5. }
  6. body{
  7.     height: 500px;
  8.     border: 1px solid blue;
  9.     position: static;
  10. }

观察效果：

将HTML的可定位属性去掉，观察效果：

上图的未知父级就是最初包含块/初始包含块，他是根元素（HTML元素）的父级。

3. 使用child-3盒子演示固对定位

设置child-3固定定位，样式如下：

  1. .box.child.three{
  2.     background-color: green;
  3.     position:fixed;
  4.     right:0;
  5.     bottom: 0;
  6. }

效果如下图：

刚好是刚刚child-2的位置
修改body高度为5000

  1. body{
  2.     height: 5000px;
  3.     border: 1px solid blue;
  4.     position: static;
  5. }

这时滚动页面，呈现的效果是：

当视口离开第一屏时，child-2就不见了。

4. 总结

1、相对定位在文档流中，基于父级定位。
2、绝对定位不在文档流中，基于非static位置属性的父级定位，如果父级是位置属性static，则向上寻找父级的父级定位，直至根元素的父级为止。
3、固定定位的是绝对定位的特例，区别在于他可以在视口滚动时，在无论第几屏都不会消失，而绝对定位在滚动时，当前屏离开视口，绝对定位元素会消失。

二、默认布局与元素类型

————-笔记—————————————————

  1. 盒子的两种，块级元素和内联元素。
    1.1块级元素
    display：block
    常见块级元素：div, table, table cell td, 列表项， form, div, p, h1-6 ）…
    宽度默认继承并占满父级宽度，高度默认由内容决定。宽高都可自定义。
    1.2内联元素
    display：inline
    用来描述块级元素内部的内容/文本。
    display:inline
    常见内联元素：a,small,select,span,button，input，label，br，img，map，em，i，strong,textarea…
    宽高由内容决定，不能自定义。在CSS里设置了也不起作用。
    1. <div style="border: 1px solid red;width: 360px;box-sizing: border-box;">
    2.      块元素的行内元素样式测试，div边框1像素红色。div行宽360px。
    3.      <span style="width: 600px; height: 150px; background-color: green;border: 1px solid yellow;box-sizing: border-box;">
    4.          div行内元素span边框1像素黄色。
    5.          设置宽度600像素，高度150像素，无作用。
    6.          背景色绿色可以看出全部span内容所占区域。
    7.          结论：span行宽继承父级元素，即div的行宽，行高由内容决定。
    8.      </span>
    9.  </div>
    虽然在样式里能看到设置的数字，但效果上看不到作用。

    实际效果：


    行内元素内边距设置有效
    1. <div style="border: 1px solid red;width: 360px;box-sizing: border-box;">
    2.      块元素的行内元素样式测试，div边框1像素红色。div行宽360px。
    3.      <span style="padding: 20px; background-color: green;border: 1px solid yellow;box-sizing: border-box;">
    4.          padding超出div边框。
    5.      </span>
    6.  </div>
    效果如下图：

    行内元素外边距设置有效，但只能左右生效，上下不生效。
    1. <div style="border: 1px solid red;width: 360px;box-sizing: border-box;">
    2.      块元素的行内元素样式测试，div边框1像素红色。div行宽360px。
    3.      <span style="margin: 20px; background-color: green;border: 1px solid yellow;box-sizing: border-box;">
    4.          padding超出div边框。
    5.      </span>
    6.  </div>
    效果如下图：

    内联元素转为块级，直接改变display为block即可。
    1.      <span style="display: block;">
    2.          内联元素转为块级元素。
    3.      </span>
    行内块display：inline-block，既可以设置宽高，后续元素又是水平排列。（正常块级元素是垂直排列）
上一条：字体图标，标媒体查询下一条：定位布局的概念与实例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多