层模型

作者: Xara_ | 来源:发表于2019-03-24 19:21 被阅读0次

position: absolute | relative | fixed
值:left / right / top / bottom : 100px; (以px为单位)

  1. position: absolute(绝对定位)
    脱离原来位置进行定位(脱离层面)(不占空间)
    absolute相对与最近的有定位的父级元素进行定位,如果没有,那么相对于文档进行定位
    z-index:1; 设置层数,数字越大层数越靠上
  2. position: relative(相对定位)
    保留原来位置进行定位(占原来所占空间的大小)
    relative相对于自己原来的位置进行定位

一般以relative当作标杆,用absolute进行定位,防止对后续元素的破坏

  1. position: fixed;(固定定位)
    使元素固定在浏览器的某个位置

让一个元素在页面正中央:

div{
      position:fixed;
      left:50%;
      top:50%;               /*以左定点为移动坐标*/
      width:100px;
      height:100px;
      background-color:red;
      margin-left:-50px;
      margin-top:-50px;      /*分别向左,向上移动二分之一个身位*/
}

两栏布局:
一个div使用position: absolute属性,另一个div调整margin值为先前div的宽度。
注意:先写position: absolute的div使它先出生

相关文章

  • 2018-08-20

    OSI7层模型 OSI7层模型 TCP/IP五层模型 TCP/IP五层模型 OSI7层模型的特点 1.下层为上层提...

  • 网络基础及系统运行状态管理

    简述osi七层模型和TCP/IP五层模型 osi七层模型 OSI七层协议模型主要是:应用层(Application...

  • 网络基础以及作业和进程的管理

    简述osi七层模型和TCP/IP五层模型 osi七层模型: osi七层模型主要分为:(1)应用层(Applicat...

  • 前端知识:网络相关

    OSI 七层模型与 TCP/IP 五层模型 OSI 七层模型:物理层、数据链路层、网络层、传输层、会话层、展示层、...

  • Linux第七周作业20200113

    1、简述osi七层模型和TCP/IP五层模型 OSI七层模型 物理层 在OSI参考模型中,物理层(Physical...

  • OSI-体系结构

    一 OSI七层模型 OSI七层协议模型以及个模型协议 OSI七层协议模型主要是:应用层(Application)、...

  • HTPP模型、安全机制,请求头和响应头

    模型 七层模型 TCP/IP模型 网络访问层:ARP、RARP 互联网层:ICMP、IP 传输层:TCP、UDP ...

  • Linux网络管理技术

    Linux网络管理技术 OSI七层模型和TCP/IP四层模型 OSI七层参考模型,TCP/IP四层参考模型 OSI...

  • 第五周作业

    1、简述osi七层模型和TCP/IP五层模型OSI 模型的七层结构: TCP/IP五层模型: 对比: 2、总结描述...

  • osi七层模型和TCP/IP五层模型

    1、简述osi七层模型和TCP/IP五层模型 1.1 osi七层模型 第7层 应用层应用层(Application...

网友评论

      本文标题:层模型

      本文链接:https://www.haomeiwen.com/subject/tuxpvqtx.html