![](/img/trans.png)
[英]If position absolute is relative to the HTML, then why does changing the height of HTML does not affect the height of the absolute positioned element?
[英]Keep an absolute positioned HTML element in it's position
具有position: absolute
的 span 标记red arrow
按预期位于右下角。 当我开始在content
容器中输入文本时,箭头开始飘走。
将content
高度设置为auto
或100%
并没有解决问题。
无论content
元素的高度如何,我们如何保持span标签red arrow
固定在右下角?
https://codesandbox.io/s/gracious-shockley-dcp59?file=/src/App.js
HTML
<div className="App">
<div className="container">
<div className="content">
<div suppressContentEditableWarning={true} contentEditable="true">
Test
</div>
</div>
<span className="helper"></span>
</div>
<div className="container">
<div className="content">
<div suppressContentEditableWarning={true} contentEditable="true">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of
Lorem Ipsum.
</p>
</div>
</div>
<span className="helper"></span>
</div>
</div>
样式文件
.container {
overflow: auto;
border: 1px solid #000;
width: 150px;
height: 100px;
float: left;
transform: translate(0px, 10px);
margin-right: 20px;
}
.content {
padding: 15px;
background-color: #ddd;
}
.helper::before {
content: "";
position: absolute;
right: 3px;
bottom: 3px;
width: 5px;
height: 5px;
border-right: 4px solid red;
border-bottom: 4px solid red;
}
为了解决这个问题,我将滚动行为定义移动到.content
并分配position: relative;
到.container
。
.container { position: relative; /* new */ overflow: hidden; /* changed */ border: 1px solid #000; width: 150px; height: 100px; float: left; transform: translate(0px, 10px); margin-right: 20px; } .content { padding: 15px; background-color: #ddd; width: inherit; /* new */ height: inherit; /* new */ box-sizing: border-box; /* new */ overflow-y: scroll; /* new */ } .helper { position: absolute; right: 3px; bottom: 3px; width: 5px; height: 5px; border-right: 4px solid red; border-bottom: 4px solid red; }
<div class="App"> <div class="container"> <div class="content"> <div suppressContentEditableWarning={true} contentEditable="true"> Test </div> </div> <span class="helper"></span> </div> <div class="container"> <div class="content"> <div suppressContentEditableWarning={true} contentEditable="true"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> </div> <span class="helper"></span> </div> </div>
注意:我已将className
更改为class
以使代码片段起作用。 我没有对 HTML 结构进行任何更改。
您的助手 div 位于错误的位置。 它需要在.content
div 中,并且.content
div 需要有position: relative
。 现在助手是相对于父容器的,而不是内容。 此外,您不需要为辅助形状使用伪元素,这些样式可以直接应用于元素和content: ""
已删除。
HTML
<div className="App">
<div className="container">
<div className="content">
<div suppressContentEditableWarning={true} contentEditable="true">
Test
</div>
<span className="helper"></span>
</div>
</div>
<div className="container">
<div className="content">
<div suppressContentEditableWarning={true} contentEditable="true">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of
Lorem Ipsum.
</p>
</div>
<span className="helper"></span>
</div>
</div>
</div>
样式文件
.App {
font-family: sans-serif;
}
.container {
overflow: auto;
border: 1px solid #000;
width: 150px;
height: 100px;
float: left;
transform: translate(0px, 10px);
margin-right: 20px;
}
.content {
padding: 15px;
background-color: #ddd;
}
.content {
position: relative;
}
.helper {
position: absolute;
right: 3px;
bottom: 3px;
width: 5px;
height: 5px;
border-right: 4px solid red;
border-bottom: 4px solid red;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.