Web实现：CSS不同的定位方式

最新推荐文章于 2024-08-03 23:12:36 发布

jasmyn518

最新推荐文章于 2024-08-03 23:12:36 发布

阅读量278

点赞数

分类专栏： HTML 笔记 CSS 文章标签：前端 css css3

本文链接：https://blog.csdn.net/jasmyn518/article/details/122520068

版权

笔记同时被 3 个专栏收录

127 篇文章 4 订阅

订阅专栏

HTML

78 篇文章 2 订阅

订阅专栏

CSS

68 篇文章 0 订阅

订阅专栏

默认定位：

<!DOCTYPE html>
<head>
<!--系统内置 start-->
<script type="text/javascript" src="//qgt-style.oss-cn-hangzhou.aliyuncs.com/commonJSCSS/console.js"></script>
<!--系统内置 end-->
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="./index.css" />
  <title>优课达</title>
</head>
<body>
  <h1 class="title">MOUNTAIN</h1>
  <p>
    The Facebook post was heartfelt. We like our little town just as it is:
    Little. Homey. Just us’ns.
  </p>
  <div class="img-box">
    <img
      class="first"
      alt=""
      src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/1.jpg?x-oss-process=image/resize,h_300"
    />
    <img
      alt=""
      src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/2.jpg?x-oss-process=image/resize,h_300"
    />
    <img
      alt=""
      src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/3.jpg?x-oss-process=image/resize,h_300"
    />
    <img
      alt=""
      src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/4.jpg?x-oss-process=image/resize,h_300"
    />
  </div>
  <h2>LISTEN</h2>
  <p>
    Listen, I can empathize. As someone who’s lived in the Denver area since
    1971 — right about the time John Denver’s songs were enticing folks to move
  </p>
  <footer></footer>
</body>

body {
  margin: 0; /*去掉默认的样式*/
  font-family: Sans-serif;
  color: rgba(0, 0, 0, 0.84);
  font-size: 16px;
  padding: 30px;
}

img{
  width: 100%;
}

/*position有4个常用值，分别是：relative相对定位、absolute绝对定位、fixed固定定位、sticky粘性定位*/

相对定位：

body {
  margin: 0; /*去掉默认的样式*/
  font-family: Sans-serif;
  color: rgba(0, 0, 0, 0.84);
  font-size: 16px;
  padding: 30px;
}

img {
  width: 100%;
}

.first{
  position: relative;
  left: 50px;
  top: 50px;
}

绝对定位：

body {
  margin: 0; /*去掉默认的样式*/
  font-family: Sans-serif;
  color: rgba(0, 0, 0, 0.84);
  font-size: 16px;
  padding: 30px;
}

img {
  width: 100%;
}

.first {
  position: absolute;
  left: 50px;
  top: 50px;
}
/*
absolute被称为绝对定位。绝对定位不为元素预留空间，
通过指定元素相对于最近的非static定位祖先元素的偏移，
来确定元素位置。
*/
/*
三个关键词：最近、非static定位、祖先元素。
分析一下在上面的网页中，浏览器是怎么布局absolute元素的。
1.首先我们获取到第一张图片元素<img class="first" src="xxx"/>,
  我们发现它是absolute布局。
2.因此寻找它的父亲节点<div class="img-box">，我们发现此元素并未
  配置position属性，其遵循默认布局position=static，并不符合
  非static要求。
3.因此继续寻找<div class="img-box">的父亲节点，找到<body>。
4.<body>已经没有父亲节点了，所以按照,body>的位置为标准进行偏移。
*/
/*
.img-box {
  position: relative;
}
*/
/*
  absolute绝对定位和relation相对定位的区别：
  relation是相对自己进行top、left、right、bottom进行偏移，
  而absolute是寻找最近的非static的祖先节点进行偏移。
*/

固定定位：

body {
  margin: 0; /*去掉默认的样式*/
  font-family: Sans-serif;
  color: rgba(0, 0, 0, 0.84);
  font-size: 16px;
  padding: 30px;
}

img {
  width: 100%;
}

h1 {
  z-index: 100;     /*z-index决定不同图层的优先级*/
  /*
    1.默认非static元素的z-index都为0。
    2.z-index越大，则越在最上面，离观察者越近。
    3.同样的z-index，在HTML中的元素越靠后，则越在最上面，离观察者越近。
  */
  position: fixed;

  /*去掉H1默认的样式*/
  padding: 0;
  margin: 0;

  left: 30px;
  top: 50px;
  color: yellowgreen; /*为了方便观看，我们修改MOUNTAIN的颜色*/
}

.img-box {
  position: relative;
}
/* 
.first {
  position: relative;
  left: 50px;
  right: 50px;
} */

粘性布局：

body {
  margin: 0; /*去掉默认的样式*/
  font-family: Sans-serif;
  color: rgba(0, 0, 0, 0.84);
  font-size: 16px;
  padding: 30px;
}

img {
  width: 100%;
}
h1 {
  position: sticky;
  color: yellowgreen;
  top: 50px;
  z-index: 1;
}

绝对定位实例：

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="./post.css" />
  <title>优课达</title>
</head>
<body>
  <section class="box">
    <img
      class="java"
      src="https://document.youkeda.com/new-learn-path/Bitmap.png"
    />
    <div class="title">Java</div>
    <div class="select"></div>
  </section>

  <script src="./post.js"></script>
</body>

.box {
  position: relative;
  width: 190px;
  height: 240px;
  box-sizing: border-box;
  border: 1px solid #f5f5f5;
  cursor: pointer;
}

.java {
  width: 160px;
  height: 160px;
  margin-left: 15px;
  margin-top: 30px;
}

.title {
  font-size: 36px;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.select {
  position: absolute;
  top: 0;
  right: 0;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #bfbfbf;
}

let isSelected = false;
const box = document.querySelector('.box');
const select = document.querySelector('.select');
box.addEventListener('click', function() {
  isSelected = !isSelected;
  if (isSelected) {
    // 如果是选择，则添加一个选中的图标
    const img = document.createElement('img');
    img.src = 'https://style.youkeda.com/img/sandwich/check.png';
    img.style = 'width: 100%; height: 100%;';
    select.appendChild(img);
  } else {
    // 如果不是选择，则清空图标
    select.innerHTML = '';
  }
});
/*

    Uncaught TypeError: Cannot read property 'addEventListener' of null
    Line: 4
    平台原因实现不了此功能，可用别的方式实现。

*/

固定定位置顶按钮实例：

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="./top.css" />
  <title>优课达</title>
</head>
<body>
  <h1 class="title">MOUNTAIN</h1>
  <p>
    The Facebook post was heartfelt. We like our little town just as it is:
    Little. Homey. Just us’ns.
  </p>

  <div class="img-box">
    <img
      class="first"
      src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/1.jpg?x-oss-process=image/resize,h_300"
    />
    <img
      src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/2.jpg?x-oss-process=image/resize,h_300"
    />
    <img
      src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/3.jpg?x-oss-process=image/resize,h_300"
    />
    <img
      src="https://document.youkeda.com/P3-1-HTML-CSS/1.8/4.jpg?x-oss-process=image/resize,h_300"
    />
  </div>

  <h2>LISTEN</h2>
  <p>
    Listen, I can empathize. As someone who’s lived in the Denver area since
    1971 — right about the time John Denver’s songs were enticing folks to move
  </p>
  <img
    class="top"
    src="http://document.youkeda.com/P3-1-HTML-CSS/1.8/top.png"
  />
  <script src="./top.js"></script>
</body>

body {
  margin: 0; /*去掉默认的样式*/
  font-family: Sans-serif;
  color: rgba(0, 0, 0, 0.84);
  font-size: 16px;
  padding: 30px;
}

img {
  width: 100%;
}

h1 {
  z-index: 100;
  position: fixed;
  left: 50px;
  top: 50px;
  color: yellowgreen; /*为了方便观看，我们修改MOUNTAIN的颜色*/
}

.img-box {
  position: relative;
}

.top {
  position: fixed;
  right: 50px;
  bottom: 50px;
  width: 50px;
  height: 50px;
}

const topDom = document.querySelector('.top');
topDom.addEventListener('click', function() {
  document.body.scrollTop = document.documentElement.scrollTop = 0;
});

jasmyn518

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web实现：CSS不同的定位方式

默认定位：<!DOCTYPE html><head><script type="text/javascript" src="//qgt-style.oss-cn-hangzhou.aliyuncs.com/commonJSCSS/console.js"></script> <meta charset="utf-8" /> <link re
复制链接

扫一扫