如何使用具有百分比（高度，宽度）尺寸的CSS位置（相对，绝对）？ [关闭]

Question

有很多与这个主题相关的问题和答案，但我没有找到类似下面提到的案例。全部描述如果要以百分比设置高度和宽度，请先以百分比设置父高度，但我仍然没有弄清楚。

例如：drupal 7 块的 ID 和类，以及从我使用该块的主体（编辑器）添加的“box1”开始的代码。

<div id="block-block-1">
    <div class="block-inner">
        <div class="block-content">
            <div class="box1">
                <a class="box2">
                    <span class="box3">For Title</span>
                    <span class="box4">For Text</span>
                    <span class="box5">For Image</span>
                </a>
           </div>
        </div>
    </div>
</div>

**那么，代码的哪一部分是哪一部分的父代码。

1. Height & width Aspect:我是否必须制作#block-block-1 {height: 100%, width: 100%}，它适用于每个人.或者我是否必须在每个阶段添加，但如果我这样做，那么所有div、a 部分都会自动为 100%，这没有任何意义。

2. Position Aspect: 现在Div与Position:relative和Position:absolute的组合定位的另一个方面，它指出父div应该是相对的并且里面所有的div都应该是绝对的，并使用top、right和left设置它的位置。但是同样的问题，一个人的相对位置就是另一个人的绝对位置，所以又产生了与高度和宽度相同的矛盾。

那么，同时使用这个身高/体重（百分比）和位置方面的正确方法是什么？

Answer 1

一些例子可以让你对位置有一些了解，希望它有助于将你的 css 技能提升到一个新的水平。

重要的是先阅读html代码，看看结果如何

首先，了解块级/内联元素。

* {
  outline: 1px solid
}
div.iHaveKids {
  padding: 25px
}
/* all childs of div*/

div > * {
  background-color: red
}
b {
  background-color: yellow;
  width: 100%;
}
b.running {
  margin-left: 40px
}
span {
  background-color: pink
}
div.clearMe {
  width: 50px;
}

<div>This is a beatifull block-level element</div>
<span>This is inline element</span>
<div>a block-level element width is, if not set, 100%</div>
<div class="iHaveKids">a block-level element height is, if not set, designed to fit hes childeren
  <div>I'm a child</div>
  <div>Me tooooooo</div>
  <div><b>A block element can have margins and/or paddings but i'm a inline element</b>
  </div>
  <div><b>Even when i have a width set i just ignore them, because i'm a inline element</b>
  </div>
  <div><b class="running away">however i can set margin-left and/or margin-right</b>
  </div>
</div>
<span>i'm an inline element<span>me toooo and i'm inside an inline element</span>
<div class="clearMe">block-level element</div>
<div>block-level elements start at a new-line in the document even if there is enough room</div>
</span>

现在位置：

* {
  outline: 1px solid;
}
div.example {
  background: red;
}
.example.ex1,
.example.ex2,
.example.ex3,
.example.ex4,
.example.ex5,
.example.ex10 {
  position: absolute;
}
span {
  background-color: yellow
}
div.ex4 {
  z-index: 2500;
}
.example.ex6,
.example.ex7,
.example.ex8,
.example.ex9 {
  position: relative;
}
.ex8,
.ex9 {
  top: 40px;
}
.ex9 {
  width: 500px;
  height: 500px;
}
.ex10 {
  bottom: 0;
}

<div>im a block-level element, i have by default position:static</div>
<div class="example ex1">im a absolute element, i have position:absolute
  <span>my parent has an absolute position i'm just an inline element</span>
</div>
<div class="example ex2">im a absolute element, i have position:absolute
  <span>hm hm hm hm hm  my parent has also position:absolute, if no top,left,bottom,right is defined than i will place my self in the normal document flow without looking to position:absolute elements, floated elementes, position:fixed elements, position, relative elements</span>
  <span>if two or more position:absolute elements are in the same place without a stacking-order than is the one that was latest in document-flow who get higher stakcing-order</span>
</div>

<div>
  <div>make</div>
  <div>some</div>
  <div>room</div>
  <div>for example 3</div>
  <div>for example 4</div>
  <div>for example 5</div>
</div>


<div class="example ex3">Example 3</div>
<div class="example ex4">Example 4:: ex3, ex5 has no stacking order but ex4 does, autor-define stacking are higher than browser setted stackings</div>
<div class="example ex5">Example 5</div>

<div>
  <div>make</div>
  <div>some</div>
  <div>room</div>
  <div>for example 6</div>
  <div>for example 7</div>
  <div>for example 8</div>
</div>

<div class="example ex6">Example 6, i have position: relative</div>
<div class="example ex7">Example 7, i have position: relative<span>hm hm hm hm hm  my parent has also position:relative, if no top,left,bottom,right is defined than i will place my self in the normal document flow</span>top
</div>
<div class="example ex8">Example 8, i have position: relative and bottom: 40px;<span>meaning i will move myself 40px away from the top where the document-flow woulkd place me</span>
</div>

<div class="example ex9">I have position:relative i'm also a block-element and have a width of 500px and an height of 500px; i also have top: 40px;

  <div class="example ex10">i'm a block-level element with position:absolute inside of an element with position:relative i also have bottom: 0 so i place myself 0px away from the bottom line of my <b>nearest positioned ancestor</b> if i have no nearest positioned ancestor i take
    the document root</div>

</div>

比最后 % 宽度和高度

div {
  position: relative;
}
div > div {
  position: absolute;
}
div.parent {
  top: 10px;
  height: 400px;
  background-color: red;
}
div.child {
  background-color: yellow;
  top: 10%;
  bottom: 10%;
}

<div class="parent">
  i'm position:realtive;

  <div class="child">
    i'm position:absolute;
    <br>i first look top, right, bottom, left
    <br>than i look to my content and fit even if i'm a block-level element
    <br>to calculate percentage i look to my the parent
    <br>my parent is height: 400px
    <br>i use top: 10%;
    <br>what means i will set 40px
    <br>
  </div>

</div>

最后回答你的问题：

那么，同时使用这个身高/体重（百分比）和位置方面的正确方法是什么？

百分比基于最大可用空间，在上一个示例中为top: 400px;，所以10% == 40px一旦您了解事物的行为方式（根，父母，孩子，兄弟姐妹，祖先，..）你发现这种工作对你来说太容易了。阅读、阅读和阅读更多内容，了解任何元素基础之间的差异。

我是否必须制作#block-block-1 {height: 100%, width: 100%}，它将适用于每个人。

就像例子中所说的，apply 'width: 100%`; 块级元素没有用。如果您询问 子元素在尺寸设置（宽度、高度、顶部、右侧、底部、左侧、边距、内边距...）上的行为方式，您需要知道哪种类型它是元素（块、内联、网格、弹性、表格、列表、替换、...元素），并且知道它的行为方式。

但同样的问题，一个人的相对位置是另一个人的绝对位置，所以又产生了与高度和宽度相同的矛盾。

带有position: absolute; 的元素寻找最近定位的祖先元素，如果未设置我将寻找document.root

有用的资源： Percentage on Mozilla Lenght properties on css-tricks The Difference Between “Block” and “Inline” on impressivewebs

Answer 2

这是一个示例，您可以了解它是如何工作的。

父块.box2距离左边缘100px，因为有边距。

如果您想使用absolute 定位元素，但以.box2 作为参考（相对于它），则必须在父元素上添加position: relative。

• .box3 距离.box2 的左边缘 0px
• .box4 距离.box2 的左边缘 100px
• .box5 距离.box2 的右边缘 100px

当然，您也可以使用top 和bottom 属性。

.box2 {
  border: 1px solid red;
  display: block;
  height: 2em;
  margin-left: 100px;
  position: relative;
  width: 400px;
}

.box2 span {
  border: 1px solid blue;
  position: absolute;
}

.box3 {
  left: 0;
}

.box4 {
  left: 100px;
}

.box5 {
  right: 100px;
}

<a class="box2">
  <span class="box3">For Title</span>
  <span class="box4">For Text</span>
  <span class="box5">For Image</span>
</a>