html - 将绝对定位的 HTML 元素保持在其位置
问题描述
red arrow
具有的跨度标签position: absolute
按预期位于右下角。当我开始在content
容器中输入文本时,箭头开始飘走。
将content
高度设置为auto
或100%
没有解决问题。
无论元素的高度如何,我们如何将 span 标签red arrow
固定在右下角content
?
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>
样式.css
.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 结构进行任何更改。
推荐阅读
- clickhouse - 为什么 clickhouse 需要这么多内存来完成一个简单的查询?
- mqtt - Mosquitto 代理 - Java Pato mqtt 客户端发布方法卡住
- python - django.db.utils.OperationalError:没有这样的表:poll_position
- reactjs - setState() 完成后如何调用函数
- java - 詹金斯在编译时失败
- javascript - React Js:如何在回调中使用 UseState?
- javascript - 如何将元素本身和同一函数中的事件作为参数传递
- java - 使用用户输入在 .txt 文件上写入问题
- node.js - 防止“npm install
" 来自在包中自动构建 node-addon - gitlab - 如何让 gitlab 按顺序运行作业?