[已解决]html_css魅族网页绝对定位求助

花开半夏—— · 发表于 2023-7-17 14:36:47

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

魅族商城网页中，PANDAER 奇趣探索部分，怎么实现绝对定位啊？
代码只讨论两行div，里面有8个div，每行四个div,每一个div的内容类似第一个div，其中第一个div中包含一张图片，有三行文字位于图片上
如果item加absolute后，上一个div中也加position=absolute,好像会出现第一个图片的重叠。
捕获.PNG

最佳答案

月排行榜 / 总排行榜

陶远航

2023-7-17 14:37:10

在魅族商城网页中实现绝对定位的方法如下：

首先，确保容器元素（包含要进行绝对定位的子元素）的position属性设置为relative，这样它将成为绝对定位元素的相对定位参考点。

然后，对于每个要进行绝对定位的子元素，可以为它们分别添加position: absolute; 定义其位置。需要注意的是，如果每个子元素都占据整个父容器的区域，会导致重叠问题。

为了避免重叠问题，你可以使用top、left、right、bottom等属性来调整每个子元素相对于父容器的位置。例如，在一个一行四个的布局中，假设每个子元素的宽度为25%，你可以使用left属性来控制每个子元素的水平位置。

以下是一个示例代码，演示如何实现绝对定位布局：

<style>
.container {
position: relative;
}
.item {
position: absolute;
width: 25%;
height: auto; /* 根据内容自适应高度 */
}
.item:nth-child(1) {
top: 0;
left: 0;
}
.item:nth-child(2) {
top: 0;
left: 25%;
}
/* 继续定义其他子元素的位置 */
</style>
<div class="container">
<div class="item">
</div>
<div class="item">
</div>
</div>

复制代码

通过设置每个子元素的top、left属性，你可以控制它们在容器中的位置。根据你的具体需求和布局，你需要调整各个子元素的位置和样式。

注意：如果在开发过程中遇到问题，建议仔细检查样式和嵌套关系，确保每个元素按照预期位置进行绝对定位。

希望这能帮到你！如果还有其他问题，请随时提问。

跳转到最佳答案楼层

the-study · 发表于 2023-7-17 14:37:08

提示: 作者被禁止或删除内容自动屏蔽

学习编程中的Ben · 发表于 2023-7-17 14:37:09

要在魅族商城网页的"PANDAER 奇趣探索"部分实现绝对定位，您可以按照以下步骤进行操作：

1. 首先，在HTML中找到需要实现绝对定位的父容器div，给它添加`position: relative;`的样式。这将创建一个相对定位的容器，作为绝对定位元素的参考点。

2. 在每个子div上添加`position: absolute;`的样式，以实现绝对定位。确保这些子div是在父容器内部。

3. 使用`top`、`bottom`、`left`和`right`属性来调整子div的位置。根据您的需求，您可以根据像素值或百分比值来调整它们的位置。

4. 如果发现第一个图片重叠的问题，可以尝试给第一个图片所在的div添加`z-index`属性，通过设置较大的值来提高其层级，确保它在其他元素上方。例如：`z-index: 999;`。

下面是一个示例代码片段，展示了如何在两行div中实现绝对定位：

```html
<!DOCTYPE html>
<html>
<head>
  <style>
.parent {
   position: relative;
}

.child {
   position: absolute;
   top: 0;
   left: 0;
   /* 其他样式属性 */
}

/* 第一个图片所在的div */
.first-child {
   z-index: 999;
}
  </style>
</head>
<body>
  <div class="parent">
<div class="child first-child">
   <img src="image.jpg" alt="图片">
   <p>第一行文字</p>
   <p>第二行文字</p>
   <p>第三行文字</p>
</div>

  </div>
</body>
</html>
```

请根据您的实际情况进行调整，根据需要可能需要添加更多的CSS属性和样式来实现您想要的效果。
求给个最佳答案呗

此回答源于ChatGPT，若有不正确之处，请多包容

陶远航 · 发表于 2023-7-17 14:37:10

在魅族商城网页中实现绝对定位的方法如下：

首先，确保容器元素（包含要进行绝对定位的子元素）的position属性设置为relative，这样它将成为绝对定位元素的相对定位参考点。

然后，对于每个要进行绝对定位的子元素，可以为它们分别添加position: absolute; 定义其位置。需要注意的是，如果每个子元素都占据整个父容器的区域，会导致重叠问题。

为了避免重叠问题，你可以使用top、left、right、bottom等属性来调整每个子元素相对于父容器的位置。例如，在一个一行四个的布局中，假设每个子元素的宽度为25%，你可以使用left属性来控制每个子元素的水平位置。

以下是一个示例代码，演示如何实现绝对定位布局：

<style>
.container {
position: relative;
}
.item {
position: absolute;
width: 25%;
height: auto; /* 根据内容自适应高度 */
}
.item:nth-child(1) {
top: 0;
left: 0;
}
.item:nth-child(2) {
top: 0;
left: 25%;
}
/* 继续定义其他子元素的位置 */
</style>
<div class="container">
<div class="item">
</div>
<div class="item">
</div>
</div>

复制代码

通过设置每个子元素的top、left属性，你可以控制它们在容器中的位置。根据你的具体需求和布局，你需要调整各个子元素的位置和样式。

注意：如果在开发过程中遇到问题，建议仔细检查样式和嵌套关系，确保每个元素按照预期位置进行绝对定位。

希望这能帮到你！如果还有其他问题，请随时提问。

isdkz · 发表于 2023-7-17 14:47:24

Threebody1 · 发表于 2023-7-17 14:54:12

不二如是 · 发表于 2023-7-17 15:09:45

绝对定位参考小甲鱼老师Web教程P59：

解决方式：

外层PANDAER类使用相对定位:

.PANDAER {
position: relative;
}

复制代码

内层item使用绝对定位:

.item {
position: absolute;
left: 0;
top: 0;
width: 25%; /* 4列,所以每列宽度设为25% */
}

复制代码

使用nth-child选择器计算每一个item的left和top值:

.item:nth-child(1) {
left: 0;
top: 0;
}
.item:nth-child(2) {
left: 25%;
top: 0;
}
.item:nth-child(3) {
left: 50%;
top: 0;
}
.item:nth-child(4) {
left: 75%;
top: 0;
}
// 依此类推设置每一项的定位值

复制代码

给item之间添加间距避免内容重叠:

.item {
margin-right: 10px;
margin-bottom: 10px;
}

复制代码

这就可以实现基于绝对定位的多行多列布局。

花开半夏—— · 发表于 2023-7-17 15:17:07

陶远航发表于 2023-7-17 14:37
在魅族商城网页中实现绝对定位的方法如下：

首先，确保容器元素（包含要进行绝对定位的子元素）的position ...

布局已实现，怎么让文字显示在图片img上，格式如魅族商城pandear奇趣探索商品部分的第一个商品

花开半夏—— · 发表于 2023-7-17 15:23:43

不二如是发表于 2023-7-17 15:09
绝对定位参考小甲鱼老师Web教程P59：

布局已实现，怎么让文字显示在图片img上，格式如魅族商城pandear奇趣探索商品部分的第一个商品

害羞的新手 · 发表于 2023-7-17 15:26:42

都是什么鬼啊？定位分为相对定位和绝对定位，使用了absolute那么就针对其父类，其父类要设置relative。至于如何显示，那便是层级的问题，试着z-index来改变层级，从而显示图片。

花开半夏—— · 发表于 2023-7-17 15:36:24

就是原来用div，然后float等于left浮动，然后有两行div
目的是把文字放在图片上，不太懂绝对定位，把relative用到了小div的上一层上了，造成8个div重叠，大概是这个意思。
然后刚才又用绝对定位重新布局了8个div，对绝对定位了解了。

花开半夏—— · 发表于 2023-7-17 15:47:36

图片和文字还是绝对定位，理解了

花开半夏—— · 发表于 2023-7-17 15:54:05

其中wrap类是为了设置宽度为1240px以及margin 0 auto居中

账号		自动登录	找回密码
密码			立即注册

the-study the-study 当前离线 UID 1430920 日志相册贡献荣誉积分 41 狗仔卡头像被屏蔽	发表于 2023-7-17 14:37:08 \| 显示全部楼层回帖奖励 +10 鱼币提示: 作者被禁止或删除内容自动屏蔽
	小甲鱼最新课程 -> https://ilovefishc.com
	回复支持反对使用道具举报显身卡

[已解决]html_css魅族网页绝对定位求助

马上注册，结交更多好友，享用更多功能^_^

回帖奖励 +10 鱼币

回帖奖励 +10 鱼币

点评

评分

回帖奖励 +10 鱼币

回帖奖励 +10 鱼币

回帖奖励 +10 鱼币

浏览过的版块