点击图片切换显示异常及图片定位不生效问题求助（JavaScript/HTML/CSS）

我来帮你逐个排查并解决这两个问题，都是前端新手常踩的小坑，咱们一步步来捋清楚~

一、点击切换图片的逻辑错误修复 #

你的核心问题出在JavaScript的条件判断和属性赋值上，先把错误点和修复方案列出来：

错误点梳理： #

1. 条件判断用了赋值运算符而非比较运算符：
   原代码里 if(barImage.style.display = 'none') 是赋值操作（直接把barImage的display设为none），不是判断逻辑，这个表达式永远返回true，所以会一直执行if分支的代码，完全搞反了你想要的显示逻辑。
2. display属性值用错了：
   display没有visible这个合法取值，要显示元素应该用block/inline-block（根据元素类型选择），visible是visibility属性的专属值，别搞混啦。
3. setAttribute用法完全错误：
   隐藏元素直接用drinkImage.style.display = 'none'就行，setAttribute需要传入「属性名」和「属性值」两个参数，原代码的写法完全不符合语法规范。
4. 初始状态未隐藏目标图片：
   你的需求是点击图片1才显示图片2，但目前图片2默认是显示的，得在CSS里给它加初始隐藏的规则。

修复后的完整代码 #

JavaScript：

var barImage = document.querySelector('#bartender img');
barImage.onclick = function() {
  var drinkImage = document.querySelector('#drink img');
  // 初始状态下drinkImage.style.display是空字符串，所以要把这个情况也考虑进去
  if (drinkImage.style.display === 'none' || drinkImage.style.display === '') {
    // 显示图片2
    drinkImage.style.display = 'block';
  } else {
    // 隐藏图片2
    drinkImage.style.display = 'none';
  }
}

CSS：

#bartender { 
   position: absolute; 
   top: 20.5px; 
   left: 743px; 
} 
   
#drink { 
   position: absolute; 
   top: 100px;
   left: 100px; 
   display: none; /* 初始状态隐藏图片2 */
}

HTML：

你的HTML结构没问题，保持原样即可：

<div id="bartender">
  <img src="intro/Untitled1095_20250217004721.png" height="390">
</div>

<div id="drink">
  <img src="intro/Untitled1098_20250217153316.png" height="100">
</div>

二、图片2定位不生效的问题排查 #

从你提供的CSS代码看，#drink的position: absolute、top、left设置是完全正确的，不生效大概率是以下原因之一：

• 样式被其他规则覆盖：打开浏览器开发者工具（F12），选中#drink元素，查看「样式」面板，看position/top/left是否被划掉（说明被优先级更高的样式覆盖），或者有没有继承父元素的定位规则。
• 父元素的定位影响了absolute的参照：absolute定位是相对于最近的设置了非static定位的父元素，如果#drink的父元素设置了position: relative，那你的top/left会相对于父元素，而不是整个视口。
• 拼写错误：检查HTML里的id是否是drink，有没有写成drinks之类的笔误，确保和CSS选择器完全一致。

先把JavaScript的逻辑修复后，再用开发者工具排查定位问题，应该就能解决啦~

备注：内容来源于stack exchange，提问作者Madison Ellis