web学习---隐藏显示定位_label display:none; 不隐藏-CSDN博客

本文链接：https://blog.csdn.net/qq_42862581/article/details/97651245

一、Css的显示隐藏

display：none，可以设置元素隐藏
Visibility：hidden，也可以设置元素隐藏
区别：visibility隐藏了元素，但是元素所占的空间还在，display不会，

例如

h1 {visibility:hidden;}

h1 {display:none;}

二、定位

position:static
是定位的默认值，没有定位效果，正常的显示在瀑布流中。
position:fixed：
绝对定位，相对于浏览器窗口进行的定位。
position:absolute，绝对定位，相对于第一个父元素的定位，
position:relative，相对定位，相对于其正常位置的定位。
position:inherit，规定应该从父元素继承 position 属性的值。

1，relative定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素显示隐藏和定位</title>
    <style>
      .relate{
        position: relative;
        left: 30px;
      }
    </style>
</head>
<body>
  <p>这是一个P标签</p>
  <img class="relate" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1564397896500&di=e90b31fba21484df329ea511b7761492&imgtype=0&src=http%3A%2F%2Fimg2.cache.netease.com%2Fpet%2F2015%2F7%2F3%2F2015070317040566407.jpg">
  <h1>这是一个h1标签</h1>
</body>
</html>

在这里插入图片描述
2，absolute定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素显示隐藏和定位</title>
    <style>
      .absolute{
        position: absolute;
        bottom: 300px;
      }
    </style>
</head>
<body>
  <p>这是一个P标签</p>
  <img class="absolute" src="http://www.sd.xinhuanet.com/news/yule/2019-07/23/1124787089_15638470327931n.jpeg">
  <h1>这是一个h1标签</h1>
</body>
</html>

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190729160914324.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODYyNTgx,size_16,color_FFFFFF,t_70
3,fixed定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素显示隐藏和定位</title>
    <style>
      .fixed{
        position: fixed;
        top:400px;
      }
    </style>
</head>
<body>
  <p>这是一个P标签</p>
  <img class="fixed" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1564397896500&di=e90b31fba21484df329ea511b7761492&imgtype=0&src=http%3A%2F%2Fimg2.cache.netease.com%2Fpet%2F2015%2F7%2F3%2F2015070317040566407.jpg">
  <h1>这是一个h1标签</h1>
</body>
</html>

在这里插入图片描述