绝对定位到div底部的文本需要向下增长/扩展，而不是向上
绝对定位到div底部的文本需要向下增长/扩展，而不是向上。
在前端开发中，绝对定位（absolute positioning）是一种常用的布局方式，它允许我们将元素精确地放置在页面上的指定位置。当我们需要将文本绝对定位到div底部时，可以通过以下步骤实现向下增长/扩展的效果：
- 首先，确保目标div的position属性设置为relative或者absolute，以便作为定位的参考点。
- 将要定位的文本元素（例如p、span等）的position属性设置为absolute，使其脱离文档流。
- 设置文本元素的bottom属性为0，将其定位到目标div的底部。
- 如果需要文本向下增长/扩展，可以设置文本元素的top属性为auto，这样文本将从底部开始增长。
- 如果需要文本水平居中，可以设置文本元素的left和right属性为0，使其水平居中。
以下是一个示例代码：
<div style="position: relative; height: 200px; border: 1px solid black;">
<p style="position: absolute; bottom: 0; top: auto; left: 0; right: 0;">
这是绝对定位到div底部的文本，向下增长/扩展。
</p>
</div>这样，无论目标div的高度如何变化，文本都会始终保持在底部，并向下增长/扩展。
在腾讯云的产品中，与前端开发和云计算相关的产品有云服务器（CVM）、云函数（SCF）、云存储（COS）等。这些产品可以帮助开发者构建和部署前端应用，提供稳定的计算和存储资源。你可以通过腾讯云官方网站（https://cloud.tencent.com/）了解更多关于这些产品的详细信息和使用方式。
相关·内容
请容忍我..。请原谅我(可能)不正确的术语：
在下面的代码中，我不明白为什么要将包含(父) div设置为“position:relative”，以便内部div相对于父div定位(使用“position:absolute”)。我认为为了实现这一点，子div应该设置为“相对”到父div。我是否理解为父div本质上是在对内部的其他div说：“嘿，你们现在都可以被定位为我的‘亲戚’了！”我有点期待它以另一种方式工作。
例如，我认为文本应该定位为与包含的div“相对”。有人能解释一下为什么它在这里是这样工作的吗？谢谢。
<div id="backgroundImage">
浏览 0提问于2013-06-18得票数 1
回答已采纳
1回答
首先，我意识到在堆栈溢出上已经有类似的问题，但是没有一个解决方案对我有用。我仍然不能正确地对齐我的导航--一个名为"header“的div的中心和底部。
这是一把小提琴
HTML：
<html>
<body>
<div class="container">
<div id="header">
<ul>
<li>
<p class="quote">Site quote,</p>
<p clas
浏览 3提问于2013-11-08得票数 0
回答已采纳
如何使图片水平居中，同时与容器底部对齐？
我已经能够让图像在水平方向居中。我还可以自己对齐容器的底部。但我不能同时做这两件事。
这就是我所拥有的：
.image_block {
width: 175px;
height: 175px;
position: relative;
margin: 0 auto;
}
.image_block a img {
position: absolute;
bottom: 0;
}
<div class="image_block">
<a href="...">&
浏览 2提问于2008-11-18得票数 40
回答已采纳
2回答
我有一个容器，它包含一个顶部区域和一个底部区域。顶部区域包含两个额外的div，这些div(稍后)将包含动态内容。底部是一个绝对定位的div，应该始终位于底部，无论顶部部分包含多少内容，底部都应该向下推。由于某种原因我不知道，它失败了。有人能帮我吗？
我的HTML看起来如下所示：
<div class="container">
<div class="top">
<div class="left">
<h3>
some left header
<
浏览 3提问于2015-12-05得票数 0
回答已采纳
下面的html创建一个页面，页面的<html>高度= 8，<body>高度= 0，但是具有“居中”的div也在屏幕上垂直地居中。怎么会这样呢？
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style=" height:100px; width:200px; margin: auto; position: absolute; top: 0; left: 0; bott
浏览 9提问于2015-06-22得票数 1
回答已采纳
这是我的
<div class="overlay">
<div id="loading">
<img src="styles/images/30.gif">
</div>
</div>
我想让它垂直和水平地居中。
该图像仅为水平居中，如下面的屏幕快照所示：
我的CSS如下所示：
.overlay {
background: #e9e9e9;
display: none;
position: absolute;
top: 0;
right
浏览 3提问于2017-04-29得票数 1
回答已采纳
我有一个水平和垂直居中的div。问题是，如果我向下滚动，div也会向下滚动并停留在中心。我怎么解决它不能向下滚动的问题？
现在它完美地居中(我使用页边距是因为图片的大小(200px X 200px))。但当向下滚动时，它会停留在中间。
.logo {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
<image class="logo&#
浏览 11提问于2017-06-28得票数 3
回答已采纳
我的目标是使用css和html对齐<h1>在<img>底部的顶部和旁边。当您缩放窗口时，图像的大小将增加(垂直和水平)，我希望文本在图像顶部对齐，并遵循底线。目前，我正在使用一定百分比的宽度和高度对齐文本，但您永远不知道文本是否实际将在底部对齐。
我还列举了一个具有预期效果的例子。蓝色文本与底部对齐的红色框是我想要完成的，并且我使用了一个具有可变高度和宽度的元素。
因此，我认为，如果能够缩放与图像本身成比例的<img>容器，我就可以获得同样的结果。
一些额外信息
我不想使用css网格。
我不知道我的应用程序中图像的比例。
我有下面的css和h
浏览 4提问于2017-12-12得票数 0
回答已采纳
3回答
我正在学习超文本标记语言和层叠样式表，并且我很难在<div>中居中放置按钮。这是我目前拥有的代码：
.box-information {
border: 2px solid #000000;
margin: 0 auto 15px auto;
padding: 0 10px 60px 10px;
width: 80%;
background-color: #ffffff;
position: relative;
}
.button-blue:link,
.button-blue:visited {
width: 7em;
display: bl
浏览 0提问于2017-08-22得票数 2
1回答
我在一个非常基本的网站模板上工作，左上角有固定的标题，左下角和右下角有固定的底线。
中间的内容应该是居中的，我只是不能完全弄清楚我做错了什么。
问题1。)如果移除height: 100% css属性，为什么垂直居中不起作用？
问题2。)当在html标记上声明height: 100%时，为什么站点大于100%并延伸到浏览器窗口之外？
问题3。)为什么bottom-left显示正确，但bottom-right显示不正确
问题4。)如果with设置为100%，文本右对齐，文本不应该从浏览器右框架开始并向左延伸吗？为什么要扩展浏览器窗口？
非常感谢你的帮助。代码在下面可见
<!DOCTYPE h
浏览 0提问于2012-05-16得票数 0
3回答
正如标题所示，我正试图将一个绝对位置的元素水平地和垂直地中心。是我在其他文章的基础上所做的尝试的推动者。目标是使红色警报文本在所勾勒的框中居中。
下面是CSS：
.parent {
position: relative;
}
.child {
bottom: 0;
color: red;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
浏览 5提问于2015-11-05得票数 0
回答已采纳
3回答
如何将div定位到包含div的底部？
<style>
.outside {
width: 200px;
height: 200px;
background-color: #EEE; /*to make it visible*/
}
.inside {
position: absolute;
bottom: 2px;
}
</style>
<div class="outside">
<div class="inside">inside</div>
</
浏览 0提问于2013-03-12得票数 124
回答已采纳
我有一个既包含图像又包含一些文本的容器。我想要的文本是垂直和水平居中的图像。
似乎最简单、最具前瞻性的方法是使用Flexbox和文本的绝对定位：
.container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.text {
position: absolute;
}
<div class='container'>
<div class='text'>
This should
浏览 5提问于2017-06-08得票数 9
回答已采纳
4回答
在页面底部保留页脚
、、、、
我得到了以下信息： <div class="wrapper">
<div class="top">
</div>
<div class="left">
</div>
<div class="main">
</div>
<div class="footer">
</div>
</div> 使用以下CSS： .top {
浏览 43提问于2016-07-08得票数 0
回答已采纳
我想在div的底部放置一个文本区域(并固定在那里)：
<div id=msg>
<div id=content>
aaaaaaaannnnnnnnnn<br>
aaaaaaaannnnnnnnnn<br>
aaaaaaaannnnnnnnnn<br>
</div>
<div id=text>
<textarea></textarea>
</div>
</div>
css
#msg{
width:60%;
heig
浏览 6提问于2015-10-06得票数 1
回答已采纳
1回答
我使用的是Firefox 25.0.1。我正在尝试理解，为什么div块由
<div style="position: absolute; margin: auto; width: 240px; height: 75px; top:0; left:0;right:0; bottom:0;">
some content
</div>
将位于浏览器窗口的中心。但是下面的内容
<div style="position: absolute; margin: auto; width: 240px; height: 75px;">
浏览 1提问于2013-12-04得票数 0
html
<div style="width:50%;overflow:hidden">
<div id="inboxHeader">
<div id="inboxCount"><p>Earth</p></div>
</div>
</div>
css
#inboxHeader{
background-color:yellow;
浏览 5提问于2014-04-01得票数 5
回答已采纳
我有一个带有overflow-y:auto;和一些元素的div，在底部我有一个脚注。页脚附着在底部，包括：position: absolute;和bottom: 0px; It works...until i会大大降低父级的高度，这样页脚就不再位于div的底部。怎么解决这个问题？JS Fiddle：
html：
<div class="outer">
<div class = "inner">
<div class= "item">item1</div>
<div clas
浏览 1提问于2016-02-03得票数 1
回答已采纳
我有一个奇怪的问题，一个绝对定位的元素设置为100%的高度。在Firefox中，元素的高度变为其父元素(有position:relative)的高度，而在Chrome中，元素的高度则向下延伸到父元素之上。
.outer
{
display:table;
height:150px;
width:100%;
position:relative;
background:gray;
}
.left, .right
{
position:absolute;
top:0;
height:100%;
background:yellow;
}
.item
{
d
浏览 1提问于2016-05-16得票数 1
回答已采纳
1回答
将页脚推到页面底部。
、、、、
站点结构如下-有一个共同的单元(内容)，它容纳了网站的所有元素和第二个单元，一个页脚，要按在网站的底部。
Content块是position: absolute，用于对齐中心(水平)--当屏幕向左、向右和向左时，可以减少屏幕的大小。问题是，使用这样的块结构，页脚不会一直按在页面底部。下面是代码：
body {
margin: 0px;
padding: 0px;
}
.a_wrapper {
width: 600px;
left: 50%;
margin-left: -300px;
position: absolute;
border: 1px dotted
浏览 3提问于2015-10-31得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
