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

des4xlb0 于 2023-05-08 发布在其他

关注(0)|答案(1)|浏览(210)

我用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>

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

我想要的样子：

css

来源：https://stackoverflow.com/questions/76175911/how-to-make-a-div-element-stick-to-another-one

1条答案

按热度按时间

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>

赞(0）回复(0）举报 2023-05-08

我来回答

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

1条答案

相关问题

热门标签

最新问答