这么多问题＆amp;答案是否与此主题有关，但没有我在下面提到的情况下发现了类似的情况。所有描述如果您想以百分比设置高度和宽度，请先设置父高度百分比，但仍然没有明确。
例如：遵循drupal 7的ID和类块，以及从＆＃34; box1＆＃34;开始的代码。我使用该块的主体（编辑）添加了。
<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>
**因此，代码的哪一部分是父代的哪一部分。
高度＆amp; width Aspect：我是否必须制作＃block-block-1 {height：100％，width：100％}，它将适用于每一个。或者我必须在每个阶段添加，但如果我这样做，则自动所有div，a部分将是100％，这没有任何意义。
排名方面现在Div定位的另一个方面是Position:relative和Position:absolute的组合，其中，它表示父{ {1}}应该是相对的，并且内部所有div应该是绝对的，并使用div，top和right设置其位置。但同样的问题一个人的相对位置是其他的绝对位置，所以它再次产生与高度和宽度相同的矛盾。
那么，同时使用此高度/重量（百分比）和位置方面的正确方法是什么？
答案 0 :(得分：2)
一些示例可以帮助您了解更多信息，希望有助于将您的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％}，它将适用于每一个。
就像在例子中说的那样，应用'宽度：100％`; 块级元素无用。如果您在维度设置（宽度，高度，顶部，右侧，底部，左侧，边距，填充，...）上询问子元素的行为，您需要知道什么样的元素是（块，内联，网格，flex，表，列表，替换，...元素）并且知道它的行为。
但同样的问题一个人的相对位置是另一个人的绝对位置，所以它再次产生与高度和宽度相同的矛盾。
position: absolute;的元素会查找最近的祖先元素，如果未设置，我会查看 document.root
有用的资源： Percentage on Mozilla Lenght properties on css-tricks The Difference Between “Block” and “Inline” on impressivewebs
答案 1 :(得分：0)
以下是一个示例，以便您了解其工作原理。
由于边距，父块.box2距离左边缘100px。
如果您想使用absolute定位元素，但使用.box2作为参考（相对于它），则必须在父元素上添加position: relative。
.box3距离.box2 .box4距离.box2 .box5距离.box2 当然，您也可以使用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>