PHP登录状态切换时如何动态调整元素的CSS定位？

看起来你已经找对了方向（用CSS类来控制状态），但HTML的写法出了点小问题，导致样式没生效。咱们一步步来修正：

1. 修正HTML的状态标记方式 #

你之前把id="searchBarN"加在了<body>标签上，但你的CSS是针对#searchBarN这个元素的定位，这就错位了。正确的做法是给<body>添加类名来标记登录状态，而那个需要调整定位的元素保留id="searchBarN"：

<body class="<?php echo isset($_SESSION['loggedIn']) && $_SESSION['loggedIn'] === true ? 'loggedIn' : ''; ?>">
  <!-- 页面其他内容 -->
  <div id="searchBarN"> <!-- 这是你要调整定位的元素 -->
    <!-- 元素内容 -->
  </div>
</body>

2. 保留你的CSS逻辑（已经是正确的） #

你的CSS写法没问题，只要HTML的结构正确，它就能根据body的类来切换#searchBarN的top值：

#searchBarN {
  position: absolute; /* 确保元素是绝对定位，top属性才会生效 */
  /* 其他基础样式 */
}

body:not(.loggedIn) #searchBarN { top: 65%; }
body.loggedIn #searchBarN { top: 35%; }

3. 为什么你之前的PHP+JS写法不推荐？ #

你尝试的$("div").css("top", "35%")存在几个问题：

• 这是jQuery代码，需要确保页面已经加载了jQuery库，否则会直接报错。
• 服务器端PHP直接输出客户端JS，执行时机不可控——如果#searchBarN元素在JS代码之后渲染，JS会找不到元素，导致样式不生效。
• 相比CSS类的方式，这种写法把样式逻辑和PHP代码耦合在一起，后期维护起来更麻烦。

4. 备选方案：直接用PHP输出内联样式 #

如果不想通过body类来控制，也可以直接在目标元素上用PHP输出内联样式，这种方式更直接，但样式和HTML耦合度高，适合简单场景：

<div id="searchBarN" style="position: absolute; top: <?php echo isset($_SESSION['loggedIn']) && $_SESSION['loggedIn'] ? '35%' : '65%;'; ?>">
  <!-- 元素内容 -->
</div>

最后检查登录逻辑 #

你的登录代码里已经正确设置了$_SESSION['loggedIn'] = true，并且跳转后会话会保留这个状态，这部分是没问题的，确保用户登录后页面能正确读取到会话状态即可。

内容的提问来源于stack exchange，提问作者user7959365