Question

我开始使用html5和css，我对使用css位置感到有些困惑。

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

Difference between relative and absolute

When to use CSS positioning?

Position absolute but relative to parent

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

先生，你能帮助我吗？

任何帮助都将受到高度赞赏。提前谢谢。

Answer 1

＆＃13;

.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;
  }

＆＃13;

<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>

＆＃13;

在哪种情况下使用position：absolute，position：relative，position：fixed和position：static in css

1 个答案: