Streamlit中同行Logo与标题布局下仅Logo顶部可点击的问题排查

嘿，我帮你找到了问题的核心原因！

你遇到的“只有Logo顶部可点击”的问题，本质是元素堆叠层级冲突导致的：

• 你用position: absolute把Logo放在左上角，但居中标题所在的<div>是文档流里的块级元素，而且在HTML代码中写在Logo容器的后面。默认情况下，HTML中后出现的元素堆叠层级更高，会直接覆盖在Logo容器之上。这就导致Logo的大部分区域被标题容器挡住了，只有顶部没被覆盖的小部分能触发点击事件。
• 另外，父容器的高度完全由标题容器决定，如果Logo的高度比标题高，还会出现Logo超出父容器的布局问题，进一步影响点击区域。

修复方案 #

我给你调整了代码，解决这两个问题：

1. 核心修改：提升Logo的堆叠层级

给绝对定位的Logo容器添加z-index: 99，让它能堆叠在标题容器之上，确保整个Logo都能被点击。

2. 优化布局：让父容器适配Logo高度

给父容器设置min-height: 100px（和你设置的Logo宽度一致，保证能容纳Logo的自适应高度），避免Logo超出容器。

3. 视觉优化：标题与Logo垂直居中对齐

调整标题的line-height和margin，让文本和Logo在垂直方向上对齐，看起来更协调。

修正后的完整代码 #

import base64
from typing import Final
from pathlib import Path
import streamlit as st

HOME_DIR: Final = Path(__file__).parent.resolve()
TITLE: Final = "Example page"

@st.cache_data(persist="disk")
def clickable_image(img_path: str, link: str) -> str:
    """By default, st.image doesn't support adding hyperlinks to a local image, so I
    have to decode a local image to base64 and pass it to HTML markdown instead.

    Parameters:
    -----------
    img_path : str
        Path to where your image is stored.
    link : str
        URL which you would like to open when the image is clicked on.

    Returns:
    -----------
    str
        A cached hyperlink where your local image is stored inside via base64 encoding.
    """
    img_path = HOME_DIR / img_path
    img_bytes, ext = img_path.read_bytes(), img_path.suffix
    encoded_img = base64.b64encode(img_bytes).decode()
    # 添加vertical-align让Logo和文本对齐更自然
    return (
        f'<div style="display: inline-block;">'
        f'<a href="{link}" target="_blank">'
        f'<img src="data:image/{ext};base64,{encoded_img}" width="100" style="vertical-align: middle;"></a>'
        f"</div>"
    )

def pretty_title(title: str, img_path: str, link: str) -> None:
    """Make a centered title, and give it a red line. Adapted from
    'streamlit_extras.colored_headers' package.

    Parameters:
    -----------
    title : str
        The title of your page.
    img_path : str
        Path to where your image is stored.
    link : str
        URL which you would like to open when the image is clicked on.
    """
    # Define the logo and text
    logo_html = clickable_image(img_path, link)
    # 调整标题样式：移除默认margin，设置line-height垂直居中
    text_html = "<h2 style='text-align: center; margin: 0; line-height: 100px;'>" f"{title}</h2>"

    # Define the HTML for the logo and text side by side
    html = (
        "<div style='position: relative; min-height: 100px;'>"  # 适配Logo高度
        f"<div style='position: absolute; top: 0; left: 0; z-index: 99;'>{logo_html}</div>"  # 提升堆叠层级
        f"<div style='text-align: center;'>{text_html}</div>"
        "</div>"
        "<hr style='background-color: #ff4b4b; margin-top: 10px;"
        " margin-bottom: 0; height: 3px; border: none; border-radius: 3px;'></hr>"
    )

    # Render the HTML in the Streamlit app
    st.markdown(html, unsafe_allow_html=True)

def main() -> None:
    st.set_page_config(
        page_title=TITLE,
        page_icon="📖",
        layout="wide"
    )
    pretty_title(TITLE, "logo.png", "https://www.google.com/")

main()

效果说明 #

修改后，整个Logo都能正常响应点击事件，标题保持完美居中，两者在同一行的布局也更协调，不会再出现点击区域失效的问题。

备注：内容来源于stack exchange，提问作者Vladimir Vilimaitis