在这种情况下，在css中使用位置:绝对，位置:相对，位置:固定和位置:静态

我正在开始使用html5和css，我对使用css位置有点困惑。

我可以从堆栈溢出中找到这些链接，

相对和绝对之间的差异

何时使用 CSS 定位？

绝对位置，但相对于父级

我仍然无法修复，我需要通过示例了解所有位置属性，以及在哪种情况下必须使用哪个位置属性来开发网页。

先生，你能帮我吗？

任何帮助将不胜感激。提前谢谢。

.parentClassDiv{
  position:relative;
  border-color:red;
  border-radius:4px;
  border-style:solid;
  height:150px;
  top:100px;
  }
.relativeClass{
  position:relative;
  border-color:green;
  border-radius:4px;
  border-style:solid;
  top:80px;
  left:30px;
  }
.absoluteClass{
  position:absolute;
  border-color:blue;
  border-radius:4px;
  border-style:solid;
  top:120px;
  }
.fixedClass{
  top:30px;
  position:fixed;
  border-color:yellow;
  border-radius:4px;
  border-style:solid;
  left:10px;
  }
.staticClass{
  top:10px;
  left:10px;
  position:static;
  border-color:brown;
  border-radius:4px;
  border-style:solid;
  }

<html>
  
  <head>
  <title>difference b/w relative,absolute,fixed,static</title>
  </head>
  <body>
  <div class='parentClassDiv'>
    <span class='relativeClass'>hello..I am relative..positioned top-40px and left:30px..relative to my parent div(red color)</span>
    <span class='absoluteClass'>hello..I am absolute</span>
    <span class='fixedClass'>hello..I am Fixed..I will be positioned from the page top(i.e:it parent always be html tag)</span>
    <span class='staticClass'>I am Static.even top is 100px.i will be positioned on my place in my parent tag(red color).i will not take top,bottom,left,right.and also i started here only because green color is relative (reserved it place and moved to bottom)</span>
  </div>
  </body>
  
</html>

相关内容

最新更新

热门标签：