前端复习知识：position和top

Dan want to learn

已于 2024-04-17 15:02:46 修改

阅读量288

点赞数 9

文章标签：前端

于 2024-04-16 17:18:25 首次发布

本文链接：https://blog.csdn.net/m0_58777269/article/details/137831367

版权

一、position

1.如果参数设置为了static其实和没有设置的效果一致的，这个就是默认的效果

2.如果设置了fixed格式，那么需要注意一下对应的内容虽然是固定在前端上了，但是要注意他只会占用自己应该占用的位置，如果你没有对应的设置width/height这种那么大概率是不会占用到全部的大小，哪怕你滑动页面也是固定在一定位置

ps:fixed默认是没有背景颜色的，如果用了fixed一定要固定

3.position：absolute；

虽然也是固定位置但是在页面本身固定位置，如果网页上下滑动，可能会消失不见，因为是固定在本身的网页上的

一般默认情况下absolute的div写在了fixed的地v后面，在展示的时候可以骑在fixed上面的

想要规避这个问题可以采用：z-index 这个参数来改变空间布局的前后位置，参数数字越大（整数）那么布局越靠前

需要注意的点：如果想要实现如图的效果

1.在一个fixed里面放置absolute的表，那么默认的absolute就是fixed，fixed的优先级更高，可以实现absolute放置在div上面

2.可以采用position:relative里面包含absolute，此时这个absolute里面的top，right这些位置参数就相对于外面的div2整个区域而言的相对位置，

<div style="
   background-color:pink;
   height: 200px;
   width:200px;
   position: relative;"> div 2
    <div style="
   position: absolute;
   background-color: red;
   color: white;
   top:60px;
   right:10px;">
      absolute
    </div>

二、top/left/right/bottom

表示对应的div距离四周的距离，如果你同时设置了两个对立的参数，默认情况下会延长div宽高

第一个问题就是：顶栏fixed会挡住一部分div的信息

1.直接选择利用：margin，但是有局限性，一旦div移动了就不行了

2.第二个就是利用padding（这个比margin会更好一点）


body {
  padding-top: 80px;
  margin: 0;

}

需要注意的点就是：

因为很多顶栏和左边或者右边的栏固定后需要不遮挡内容，这种都需要直接来使用body设置padding-top/padding-left来让div规避开

<!DOCTYPE html>
<html>

<head>
  <title>Position Practice</title>
</head>

<body style="height:3000px;
padding-top:60px;
padding-left: 80px;">

  <div style="
  background-color: black;
  color:white;
  position:fixed;
  top:0;
  left: 0;
  right:0;
  height:100px;">
    head
  </div>

  <div style="
  background-color: yellow;
  color:black;
  position:fixed;
  left:0;
  bottom:0;
  top:50px;
  width:72px;
  ">
    sidebar
  </div>

  <div style="
    background-color: blue;
    height: 200px;
    width:200px;
    position: static;"> div 1</div>
  <div style="
   background-color:pink;
   height: 200px;
   width:200px;
   position: fixed;"> div 2</div>
</body>

</html>

Dan want to learn

关注

9
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端复习知识：position和top

2.如果设置了fixed格式，那么需要注意一下对应的内容虽然是固定在前端上了，但是要注意他只会占用自己应该占用的位置，如果你没有对应的设置width/height这种那么大概率是不会占用到全部的大小。表示对应的div距离四周的距离，如果你同时设置了两个对立的参数，默认情况下会延长div宽高。1.如果参数设置为了static其实和没有设置的效果一致的，这个就是默认的效果。1.直接选择利用：margin，但是有局限性，一旦div移动了就不行了。3.fixed默认是没有背景颜色的，如果用了fixed一定要固定。
复制链接

扫一扫