添加到div的元素卡在网页顶部
有人可以帮我弄清楚如何将我的上传图片代码和文字输入添加到标题和段落正下方的页面1。当我添加它时，它会停留在页面顶部。我有下面的代码和问题的图像。我们应该为这个网页设计添加不同的部分作为作业，我是html的新手，所以我很难解决这个问题。
HTML
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>The Title</title>
<meta name="viewport" content="width=device-width">
<link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="st-container">
<input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
<a href="#st-panel-1">Page 1</a>
<input type="radio" name="radio-set" id="st-control-2"/>
<a href="#st-panel-2">Page 2</a>
<input type="radio" name="radio-set" id="st-control-3"/>
<a href="#st-panel-3">Page 3</a>
<input type="radio" name="radio-set" id="st-control-4"/>
<a href="#st-panel-4">Page 4</a>
<input type="radio" name="radio-set" id="st-control-5"/>
<a href="#st-panel-5">Page 5</a>
<div class="st-scroll">
<!-- Placeholder text from http://hipsteripsum.me/ -->
<section class="st-panel" id="st-panel-1">
<div class="st-deco" data-icon=""></div>
<h2>P1</h2>
<p>here is the paragraph.</p>
<p1> Please upload an image/txt.</p>
<div class = "main_container">
<form action="/action_page.php">
<input type="file" name="pic" accept="image/*">
</form>
<input type="text" name="What would you like to create?">
<a href="Learn.html" class="button">Let's get started!</a>
</center>
</div>
</section>
<section class="st-panel st-color" id="st-panel-2">
<div class="st-deco" data-icon=""></div>
<h2>P2</h2>
<p>Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.</p>
</section>
<section class="st-panel" id="st-panel-3">
<div class="st-deco" data-icon=""></div>
<h2>P3</h2>
<p>Sint aute occaecat id vice. Post-ironic pork belly next level godard, id fanny pack williamsburg forage truffaut.</p>
</section>
<section class="st-panel st-color" id="st-panel-4">
<div class="st-deco" data-icon=""></div>
<h2>P4</h2>
<p>Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.</p>
</section>
<section class="st-panel" id="st-panel-5">
<div class="st-deco" data-icon=""></div>
<h2>P5</h2>
<p>Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.</p>
</section>
</div><!-- // st-scroll -->
</div><!-- // st-container -->
</div>
</body>
</html>
CSS
@import url('//fonts.googleapis.com/css?family=Josefin+Slab:400,700');
body {
overflow: hidden;
}
/* Main container where upload img and text input is */
.main_container{
margin: auto;
width: 860px;
padding: 20px;
border: 1px solid #000000;
min-height: 400px;
border-top: none;
background: #ffffff;
}
a {
text-decoration: none;
}
.st-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
font-family: 'Josefin Slab', 'Myriad Pro', Arial, sans-serif;
}
.st-container > input,
.st-container > a {
position: fixed;
bottom: 0px;
width: 20%;
cursor: pointer;
font-size: 16px;
height: 34px;
line-height: 34px;
}
.st-container > input {
opacity: 0;
z-index: 1000;
}
.st-container > a {
z-index: 10;
font-weight: 700;
background: #e23a6e;
color: #fff;
text-align: center;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
}
/* "Fix" for percentage rounding: add a background bar pseudo element with the same color like the labels */
.st-container:before {
content: '';
position: fixed;
width: 100%;
height: 34px;
background: #e23a6e;
z-index: 9;
bottom: 0;
}
#st-control-1, #st-control-1 + a {
left: 0;
}
#st-control-2, #st-control-2 + a {
left: 20%;
}
#st-control-3, #st-control-3 + a {
left: 40%;
}
#st-control-4, #st-control-4 + a {
left: 60%;
}
#st-control-5, #st-control-5 + a {
left: 80%;
}
.st-container > input:checked + a,
.st-container > input:checked:hover + a{
background: #821134;
}
.st-container > input:checked + a:after,
.st-container > input:checked:hover + a:after{
bottom: 100%;
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: #821134;
border-width: 20px;
left: 50%;
margin-left: -20px;
}
.st-container > input:hover + a{
background: #AD244F;
}
.st-container > input:hover + a:after {
border-bottom-color: #AD244F;
}
.st-scroll,
.st-panel {
position: relative;
width: 100%;
height: 100%;
}
.st-scroll {
top: 0;
left: 0;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
/* Let's enforce some hardware acceleration */
-webkit-transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
}
.st-panel{
background: #fff;
overflow: hidden;
}
#st-control-1:checked ~ .st-scroll {
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-o-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
}
#st-control-2:checked ~ .st-scroll {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
#st-control-3:checked ~ .st-scroll {
-webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
-o-transform: translateY(-200%);
-ms-transform: translateY(-200%);
transform: translateY(-200%);
}
#st-control-4:checked ~ .st-scroll {
-webkit-transform: translateY(-300%);
-moz-transform: translateY(-300%);
-o-transform: translateY(-300%);
-ms-transform: translateY(-300%);
transform: translateY(-300%);
}
#st-control-5:checked ~ .st-scroll {
-webkit-transform: translateY(-400%);
-moz-transform: translateY(-400%);
-o-transform: translateY(-400%);
-ms-transform: translateY(-400%);
transform: translateY(-400%);
}
/* Content elements */
.st-deco{
width: 200px;
height: 200px;
position: absolute;
top: 0px;
left: 50%;
margin-left: -100px;
background: #fa96b5;
-webkit-transform: translateY(-50%) rotate(45deg);
-moz-transform: translateY(-50%) rotate(45deg);
-o-transform: translateY(-50%) rotate(45deg);
-ms-transform: translateY(-50%) rotate(45deg);
transform: translateY(-50%) rotate(45deg);
}
[data-icon]:after {
content: attr(data-icon);
font-family: 'FontAwesome';
color: #fff;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
position: absolute;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
font-size: 90px;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
-webkit-transform: rotate(-45deg) translateY(25%);
-moz-transform: rotate(-45deg) translateY(25%);
-o-transform: rotate(-45deg) translateY(25%);
-ms-transform: rotate(-45deg) translateY(25%);
transform: rotate(-45deg) translateY(25%);
}
.st-panel h2 {
color: #e23a6e;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
position: absolute;
font-size: 54px;
font-weight: 900;
width: 80%;
left: 10%;
text-align: center;
line-height: 50px;
margin: -70px 0 0 0;
padding: 0;
top: 50%;
-webkit-backface-visibility: hidden;
}
#st-control-1:checked ~ .st-scroll #st-panel-1 h2,
#st-control-2:checked ~ .st-scroll #st-panel-2 h2,
#st-control-3:checked ~ .st-scroll #st-panel-3 h2,
#st-control-4:checked ~ .st-scroll #st-panel-4 h2,
#st-control-5:checked ~ .st-scroll #st-panel-5 h2{
-webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
-moz-animation: moveDown 0.6s ease-in-out 0.2s backwards;
-o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
-ms-animation: moveDown 0.6s ease-in-out 0.2s backwards;
animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
@-webkit-keyframes moveDown{
0% {
-webkit-transform: translateY(-40px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0px);
opacity: 1;
}
}
@-moz-keyframes moveDown{
0% {
-moz-transform: translateY(-40px);
opacity: 0;
}
100% {
-moz-transform: translateY(0px);
opacity: 1;
}
}
@-o-keyframes moveDown{
0% {
-o-transform: translateY(-40px);
opacity: 0;
}
100% {
-o-transform: translateY(0px);
opacity: 1;
}
}
@-ms-keyframes moveDown{
0% {
-ms-transform: translateY(-40px);
opacity: 0;
}
100% {
-ms-transform: translateY(0px);
opacity: 1;
}
}
@keyframes moveDown{
0% {
transform: translateY(-40px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
.st-panel p {
position: absolute;
text-align: center;
font-size: 16px;
line-height: 22px;
color: #8b8b8b;
z-index: 2;
padding: 0;
width: 50%;
left: 25%;
top: 50%;
margin: 10px 0 0 0;
-webkit-backface-visibility: hidden;
}
#st-control-1:checked ~ .st-scroll #st-panel-1 p,
#st-control-2:checked ~ .st-scroll #st-panel-2 p,
#st-control-3:checked ~ .st-scroll #st-panel-3 p,
#st-control-4:checked ~ .st-scroll #st-panel-4 p,
#st-control-5:checked ~ .st-scroll #st-panel-5 p{
-webkit-animation: moveUp 0.6s ease-in-out 0.2s backwards;
-moz-animation: moveUp 0.6s ease-in-out 0.2s backwards;
-o-animation: moveUp 0.6s ease-in-out 0.2s backwards;
-ms-animation: moveUp 0.6s ease-in-out 0.2s backwards;
animation: moveUp 0.6s ease-in-out 0.2s backwards;
}
@-webkit-keyframes moveUp{
0% {
-webkit-transform: translateY(40px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0px);
opacity: 1;
}
}
@-moz-keyframes moveUp{
0% {
-moz-transform: translateY(40px);
opacity: 0;
}
100% {
-moz-transform: translateY(0px);
opacity: 1;
}
}
@-o-keyframes moveUp{
0% {
-o-transform: translateY(40px);
opacity: 0;
}
100% {
-o-transform: translateY(0px);
opacity: 1;
}
}
@-ms-keyframes moveUp{
0% {
-ms-transform: translateY(40px);
opacity: 0;
}
100% {
-ms-transform: translateY(0px);
opacity: 1;
}
}
@keyframes moveUp{
0% {
transform: translateY(40px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
/* Colored sections */
.st-color,
.st-deco{
background: #fa96b5;
}
.st-color [data-icon]:after {
color: #fa96b5;
}
.st-color .st-deco {
background: #fff;
}
.st-color h2 {
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.st-color p {
color: #fff;
color: rgba(255,255,255,0.8);
}
@media screen and (max-width: 520px) {
.st-panel h2 {
font-size: 42px;
}
.st-panel p {
width: 90%;
left: 5%;
margin-top: 0;
}
.st-container > a {
font-size: 13px;
}
}
@media screen and (max-width: 360px) {
.st-container > a {
font-size: 10px;
}
.st-deco{
width: 120px;
height: 120px;
margin-left: -60px;
}
[data-icon]:after {
font-size: 60px;
-webkit-transform: rotate(-45deg) translateY(15%);
-moz-transform: rotate(-45deg) translateY(15%);
-o-transform: rotate(-45deg) translateY(15%);
-ms-transform: rotate(-45deg) translateY(15%);
transform: rotate(-45deg) translateY(15%);
}
}
3 个答案:
答案 0 :(得分：1)
看看您的HTML，我只是将您的输入置于新div下并为他增加了保证金：
<div style="position: absolute; margin-top: 50%; margin-left: 35%">
而且看起来像这样：
<p>here is the paragraph.</p>
<div style="position: absolute; margin-top: 50%; margin-left: 35%">
<p1> Please upload an image/txt.</p>
<div class = "main_container">
<form action="/action_page.php">
<input type="file" name="pic" accept="image/*">
</form>
<input type="text" name="What would you like to create?">
<a href="Learn.html" class="button">Let's get started!</a>
</div></div>
答案 1 :(得分：1)
上面的答案很棒。找出这些东西的提示是右键单击元素并选择“Inspect”，然后您可以看到影响布局的所有值以及它们在css中的位置。
答案 2 :(得分：0)
当你是新手时，这是可以理解的，这样的事情可能很难被注意到。我可能错了，但是，正是由于某些特殊情况导致您的代码没有按照预期的方式运行。
您的“main_container”类受其父div元素的影响，其中“st-container”类位于左上角。如果您使用“main_container”的css选择器并更改其位置，其特异性将覆盖“st-container”。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？