Html 我不能移动我的潜水艇，向上？但我可以左右移动它？
我正在尝试设计一个简单的网站，我制作了一个带有磨砂玻璃效果的div，现在我可以左右定位，但我似乎无法向上移动！？该div的名称为product panel *{ 保证金：0； 填充：0； } .背景{ 背景图像：urlhttp://www.kubipet.com/data/out/55/iwp779807523-electrical-wallpapers.jpg; 背景重复：无重复； 背景附件：固定； 背景尺寸：封面； } 收割台磨砂{ 背景：继承； 位置：相对位置； 宽度：100%； 高度：200px； } .jumbotron流体{ 背景：继承； 左侧填充：0px； 右边填充：0px； 填充顶部：0px； 垫底：0px； 边缘底部：0px； 宽度：100%； 颜色：rgb0，0，0； } .显示器-3{ 文本对齐：居中； 边缘顶部：50px； } .navbar.main{ 背景色：rgb0，0，0； 颜色：rgb255、255、255； 边际上限：0px； 边框样式：无； 边界半径：0%； } .导航药丸{ 边缘顶部：2倍； 文本对齐：居中； 边缘顶部：5px； 边缘底部：0px； } 标签{ 颜色：白色； } 选项卡：悬停{ 背景色：rgb63,60,60； } .磨砂玻璃{ 宽度：10%； 高度：自动； 背景：继承； 位置：相对位置； z指数：1； 溢出：隐藏； 利润率：30px，30px，30px，30px； 填充：2rem； 框大小：边框框； } 磨砂玻璃{ 宽度：自动； 高度：自动； 内容：； 位置：绝对位置； z指数：-1； 顶部：0；右侧：0；底部：0；左侧：0； 背景：继承； 盒影：插入0 0 3000px RGBA255255.5； 过滤器：blur5px； } 产品面板{ 宽度：500px； 高度：400px； 文本对齐：左对齐； 位置：绝对位置； 边缘顶部：20px； } 联系方式{ 宽度：200px； 高度：330px； 文本对齐：左对齐； 左边距：自动； 边缘底部：100px； 位置：相对位置； } 细节{ 文本对齐：居中； } 在这里输入代码 ` 网站 随机标题 ' 联系方式 姓名：无名氏 电话号码：000000000 地址: 随机标题 邮政信箱000 随机的城镇，随机的国家 000 这就是问题所在。Html 我不能移动我的潜水艇，向上？但我可以左右移动它？,html,css,Html,Css,我正在尝试设计一个简单的网站，我制作了一个带有磨砂玻璃效果的div，现在我可以左右定位，但我似乎无法向上移动！？该div的名称为product panel *{ 保证金：0； 填充：0； } .背景{ 背景图像：urlhttp://www.kubipet.com/data/out/55/iwp779807523-electrical-wallpapers.jpg; 背景重复：无重复； 背景附件：固定； 背景尺寸：封面； } 收割台磨砂{ 背景：继承； 位置：相对位置； 宽度：100%； 高度：
将top:valuepx添加到此
#product-panel{
width:500px;
height: 400px;
text-align:left;
position: absolute;
margin-top:20px;
top:320px;
}
在之前，当您在一行中使用多个项目时，它应该满足宽度比例 因此，请给出宽度百分比“%”，而不是像素“px”， 在这里，您可以使用float:left在一行中包含多个项目。 尝试使用百分比宽度，这是大多数开发人员使用的方式 *{ 保证金：0； 填充：0； } .背景{ 背景图像：urlhttp://www.kubipet.com/data/out/55/iwp779807523-electrical-wallpapers.jpg; 背景重复：无重复； 背景附件：固定； 背景尺寸：封面； } 收割台磨砂{ 背景：继承； 位置：相对位置； 宽度：100%； 高度：200px； } .jumbotron流体{ 背景：继承； 左侧填充：0px； 右边填充：0px； 填充顶部：0px； 垫底：0px； 边缘底部：0px； 宽度：100%； 颜色：rgb0，0，0； } .显示器-3{ 文本对齐：居中； 边缘顶部：50px； } .navbar.main{ 背景色：rgb0，0，0； 颜色：rgb255、255、255； 边际上限：0px； 边框样式：无； 边界半径：0%； } .导航药丸{ 边缘顶部：2倍； 文本对齐：居中； 边缘顶部：5px； 边缘底部：0px； } 标签{ 颜色：白色； } 选项卡：悬停{ 背景色：rgb63,60,60； } .磨砂玻璃{ 宽度：10%； 高度：自动； 背景：继承； 位置：相对位置； z指数：1； 溢出：隐藏； 利润率：30px，30px，30px，30px； 填充：2rem； 框大小：边框框； } 磨砂玻璃{ 宽度：自动； 高度：自动； 内容：； 位置：绝对位置； z指数：-1； 顶部：0；右侧：0；底部：0；左侧：0； 背景：继承； 盒影：插入0 0 3000px RGBA255255.5； 过滤器：blur5px； } 产品面板{ 宽度：70%； 高度：400px； 文本对齐：左对齐； 浮动：左； } 联系方式{ 宽度：30%； 高度：330px； 文本对齐：左对齐； 左边距：自动； 边缘底部：100px； 浮动：左； } 细节{ 文本对齐：居中； } 在这里输入代码 ` 网站 随机标题 ' 这就是问题所在。 联系方式 姓名：无名氏 电话号码：000000000 地址: 随机标题 邮政信箱000 随机的城镇，随机的国家 000
任何网页最重要的部分是它的线框结构。所以你的html结构应该是最优的。我刚刚构造了html代码，并根据您的要求使用引导类来设置页面。请检查并让我知道这是否解决了您的问题。stackoverflow的新特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="fonts\css\font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="css\KAD-css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Website</title>
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
<style>
*{
margin: 0;
padding: 0;
}
.background{
background-image: url("http://www.kubipet.com/data/out/55/iwp779807523-electrical-wallpapers.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#header-frosted{
background: inherit;
position: relative;
width:100%;
height: 200px;
}
.jumbotron-fluid{
background: inherit;
padding-left: 0px;
padding-right:0px;
padding-top:0px;
padding-bottom: 0px;
margin-bottom: 0px;
width: 100%;
color:rgb(0, 0, 0);
}
.display-3{
text-align: center;
margin-top:50px;
}
.navbar.main {
background-color:rgb(0, 0, 0);
color: rgb(255, 255, 255);
margin-top: 0px;
border-style: none;
border-radius: 0%;
}
.nav-pills{
margin-top:2px;
text-align: center;
margin-top:5px;
margin-bottom: 0px;
}
#tab{
color: white;
}
#tab:hover {
background-color: rgb(63, 60, 60);
}
.frosted-glass {
width:10%;
height:auto;
background: inherit;
position: relative;
z-index: 1;
overflow: hidden;
margin: 30px,30px,30px,30px;
padding: 2rem;
box-sizing: border-box;
}
.frosted-glass::before {
width:auto;
height:auto;
content: "";
position: absolute;
z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
background: inherit;
box-shadow: inset 0 0 3000px rgba(255,255,255,.5);
filter: blur(5px);
}
#product-panel{
width:500px;
height: 400px;
text-align:left;
position: absolute;
margin-top:20px;
}
#contact-details{
width:200px;
height: 330px;
text-align:left;
margin-left: auto;
margin-bottom: 100px;
position: relative;
}
#details{
text-align: center;
}
/*
Start of Code - Laxmikant Killekar
*/
body{
overflow-x: hidden;
}
/*
End of Code - Laxmikant Killekar
*/
</style>
</head>
<body class="background">
<div class="jumbotron jumbotron-fluid frosted-glass" id="header-frosted" >
<div class="container img-responsive">
<h1 class="display-3">Random Title</h1>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-dark navbar-default main" >
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"id="tab">Random Title</a>
</div>
<div class="collapse navbar-collapse text-centre" id="myNavbar">
<ul class="nav nav-pills center-pills">
<li class="nav-item ">
<a class="nav-link" href="#" id="tab"> Random1</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#"id="tab"> Random2 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"id="tab"> Random3</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
</nav>
<!-- Start of Code - Laxmikant Killekar -->
<div class="fluid-container">
<div class="row">
<div class="col-md-6">
<!--Product Panel-->
<div class="frosted-glass" id="product-panel">
This is the div in question.
</div>
</div>
<div class="col-md-4 pull-right">
<div class="frosted-glass" id="contact-details">
<h3 id="details">Contact Details</h3>
<p><strong>Name:</strong>John Doe</p>
<p><strong>Phone Number:</strong> 000000000</p>
<h3>Address:</h3>
<strong><p>Random Title.</p>
<p>PO Box 000</p>
<p>Random Town, Random Country</p>
<p>000</p>
</strong>
</div>
</div>
</div>
</div>
<!--End of Code - Laxmikant Killekar-->
</body>
</html>