css 如何让一个div元素与另一个div元素结合?

des4xlb0  于 2023-05-08  发布在  其他
关注(0)|答案(1)|浏览(211)

我用div元素做了一个盒子,想在它上面放一个导航栏。我希望导航栏被粘在div框上,这样当页面调整大小时,它们仍然保持在一起。我尝试通过使用“top”和“left”属性调整导航条的位置来手动完成。但在调整页面大小后,我意识到它不会工作。
这就是我的目的,我的代码不是最好的,因为我对CSS很陌生。我已经添加了一个背景图像和模糊,并作出上述div框。

.background {
  background-image: url("Background.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  height: 100vh;
  width: 100%;
}

.asdf {
  margin: 0;
  padding: 0px;
}

.asd {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  height: 100vh;
  width: 100%;
}

#Box {
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  border: 4px solid #f1f1f1;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 60%;
  padding: 20px;
}

.Bigbox {
  font-weight: 500;
  Font-family: Helvetica;
  position: relative;
  font-size: 20px;
  color: white;
  text-align: center;
}

.title {
  font-weight: 700;
  font-size: 40px;
  transform: translate(0, -30%);
}

.text {
  font-size: 25px;
  text-align: justify;
}

#image1 {
  border: 2px solid #f1f1f1;
  width: 500px;
  Height: 300px;
}

li {
  float: left;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #f1f1f1;
  position: relative;
}
<head>
  <Title> title </Title>
  <link rel="stylesheet" type="text/css" href="Main.css">
</head>

<body class="asdf">
  <div class="background">
    <div class="asd">
      <div>
        <UL>
          <li><a href="#home">Home</a></li>
          <li><a href="#news">News</a></li>
          <li><a href="#contact">Contact</a></li>
        </UL>
      </div>
      <div id="Box" class="Bigbox">
        <div class="title">Lorem ipsum </div>
        <div class="text"> lorem ipsum</div>
      </div>
    </div>
  </div>
</body>

任何帮助是赞赏!
用于说明的图片:
它是如何:

我想要的样子:

3pmvbmvn

3pmvbmvn1#

现代的方法是使用flexbox。您可以将导航栏和内部框的父元素设置为Flex容器,然后应用对齐和对齐规则将其子元素居中。
默认情况下,元素彼此“粘”在一起,除非您做了一些更改。他们只是一堆,毕竟。
绝对positioning通常是有问题的,因为它采用正常文档流之外的元素。不要使用它,除非你很好地理解为什么你需要它。
浮动也很麻烦,除了少数特定情况外,不被认为是现代布局技术。避开他们。

body {
  margin: 0;
  padding: 0px;
}

.container {
  background-image: url("Background.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container-inner {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
}

#Box {
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  border: 4px solid #f1f1f1;
  border-radius: 4px;
  padding: 20px;
}

.Bigbox {
  font-weight: 500;
  Font-family: Helvetica;
  position: relative;
  font-size: 20px;
  color: white;
  text-align: center;
}

.title {
  font-weight: 700;
  font-size: 40px;
  transform: translate(0, -30%);
}

.text {
  font-size: 25px;
  text-align: justify;
}

#image1 {
  border: 2px solid #f1f1f1;
  width: 500px;
  Height: 300px;
}

li {
  display: inline-block;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #f1f1f1;
  position: relative;
}
<head>
  <Title> title </Title>
  <link rel="stylesheet" type="text/css" href="Main.css">
</head>

<body>
  <div class="container">
    <div class="container-inner">
      <div>
        <UL>
          <li><a href="#home">Home</a></li>
          <li><a href="#news">News</a></li>
          <li><a href="#contact">Contact</a></li>
        </UL>
      </div>
      
      <div id="Box" class="Bigbox">
        <div class="title">Lorem ipsum </div>
        <div class="text"> lorem ipsum</div>
      </div>
    </div>
  </div>
</body>

相关问题