1.固定定位

特点：

position: fixed;
固定定位总是相对于html,这样就省去像绝对定位需要一个定位元素当父级的麻烦

实例效果

代码

代码结构

qq.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线QQ客服</title>
    <link rel="stylesheet" href="./qq.css">
    <link rel="stylesheet" href="modal.css" />
</head>
<body>
    <header>
        <h1>首页</h1>
    </header>
    <div class="modal">
        <div class="modal-backdrop"></div>
        <div class="modal-body">
            <h2>点击下方在线咨询</h2>
            <span class="iconfont icon-QQzaixiankefu"></span>            
        </div>
    </div>    
</body>
</html>

qq.css

@import url("./icons/iconfont.css");
.icon-QQzaixiankefu{
    font-size: 3em;
    background-color: orange;
  }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
header {
    background-color: #1fa28a;
    /* padding: 上下  左右 */
    padding: 1em 2em;
    overflow: hidden;
}
header h1 {
    text-align: center;
}
.modal {
  position: relative;
}
.modal .modal-backdrop{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(0, 0, 0, 0.5);
}
.modal .modal-body {
    border: 3px solid;
    padding: 2em;
    margin: 1em;
    background-color: rgb(246, 255, 224);
    position: fixed;
    left: 15em;
    right: 15em;
    top: 10em;
    text-align: center;
}

2.绝对定位

PS：实例内容为传统三行三列定位布局

特点：

position: absolute;
绝对定位必须要一个定位父级元素（定位元素）
通过 position: relative;元素转为定位元素

页面显示

代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>传统定位布局</title>
    <link rel="stylesheet" href="./modal1.css">
</head>
<body>
    <header>页眉</header>
    <div class=container>
        <aside>左侧</aside>
        <main>中间</main>
        <aside>右侧</aside>
    </div>
    <footer>页脚</footer>    
</body>
</html>

css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    font-size: 10px;
}
body {
    font-size: 1.6rem;
}
header,footer {
    min-height: 10rem;
    background-color: rgba(173, 216, 230, 0.884);
}
.container {
    margin: 1rem 0rem;
    min-height: calc(100vh - 22rem);
    position: relative;
}
.container aside {
    background-color: rgba(255, 255, 0, 0.385);
    width: 15rem;
    position: absolute;
    min-height: inherit;
}
.container aside:last-of-type{
   right: 0rem;
   top: 0rem;
}
.container main{
    position: absolute;
    left: 16rem;
    right: 16rem;
    background-color: rgb(10, 104, 10, 0.45);
    min-height: inherit;
}

定位以及三行三列布局方式

1.固定定位

特点：

实例效果

代码

代码结构

qq.html

qq.css

2.绝对定位

PS：实例内容为传统三行三列定位布局

特点：

页面显示

代码

html

css

相关文章