Make a panel under a button that overlays another element

Question

I have an editor and several buttons above it on the right. I would like to have a panel just under Button2 that overlays the editor. Then, clicking on Button2 will expand and collapse the panel (which will be easy to implement).

I have written the following code: https://codesandbox.io/s/fervent-mclaren-3mrtyj?file=/src/App.js. At the moment, the panel is NOT under Button2 and does NOT overlay the editor.

Does anyone know how to amend the CSS?

import React from "react";
import { Stack } from "@fluentui/react";

export default class App extends React.Component {
  render() {
    return (
      <div>
        <Stack horizontal horizontalAlign="space-between">
          <div>Title</div>
          <div>Button1 Button2 Button3</div>
        </Stack>
        <div
          style={{
            backgroundColor: "yellow",
            width: "350px",
            height: "50px"
          }}
        >
          A floating panel which is supposed to be always under "Button2" and
          overlays the editor.
        </div>
        <div
          style={{
            backgroundColor: "gray",
            width: "100%",
            height: "300px"
          }}
        >
          An editor
        </div>
      </div>
    );
  }
}

Answer 1

You need to use position:absolute on floating pane and add it in the editor div which will have position:relative.You can see the result it works fine On clicking button 2 the floating panel hides/shows alternatively

This will work.

var btn=document.querySelector('.drop_btn');
    btn.onclick=function()
    {
      document.querySelector('.dropdown').classList.toggle('block');
    }

*
        {
            font-family: 'arial';
            margin: 0px;
            padding: 0px;
        }
        .menu_pane
        {
            display: flex;
            background: #151515;
            color: white;
            padding:5px 10px;
            align-items: center;
            border-bottom: 1px solid rgba(255,255,255,0.2);
        }

        .menu_pane h3
        {
            font-weight: normal;
            font-size: 18px;
            flex-grow: 1;
        }

        .menu_pane .btn button
        {
            position: relative;
            background: #0971F1;
            color: white;
            border-radius: 5px;
            border:none;
            cursor: pointer;
            padding: 8px 20px;
            margin-right: 10px;
        }

        .dropdown
        {
            display: none;
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;
            color: white !important;
            position: absolute;
            background: #242424;
            border-radius: 0 0 10px 10px;
        }

        .menu_pane .btn .dropdown p
        {
            font-size: 14px;
        }
        .editor_pane
        {
            position: relative;
          background:#151515;
          color: white;
          min-height: 50vh;
          border-radius: 0 0 10px 10px;
          padding: 10px;
          color: #512DA8;
        }
        
        .block
        {
            display: block;
        }

<div class="container">
    <div class="menu_pane">
        <h3>Title</h3>
        
        <div class="btn">
        <button>Button-1</button>
        </div>

        <div class="btn">
        <button class="drop_btn">Button-2</button>

        </div>

        <div class="btn">
        <button>Button-3</button>
        </div>
    </div>

    <div class="editor_pane">
        <p>An editor</p>
        <div class="dropdown">
            <p>A floating panel which is supposed to be always under "Button2" and overlays the editor.</p>
        </div>
    </div>
</div>

Answer 2

How does this look?

https://codesandbox.io/s/hidden-platform-q3v4kc?file=/src/App.js

I moved the floating pane into the button, made the button position relative, and made the floating pane position absolute.

Note: notice there's no top property on the floating pane. One neat thing about position absolute is if you don't set top, left, bottom, right those positions will be where that box would be if it wasn't position absolute.

Answer 3

Update

I noticed that the overlay needed to cover the "editor" area only and have the example updated with hopefully the right placement of it.

Updated live example: codesandbox

import React from "react";
import { Stack } from "@fluentui/react";

export default class App extends React.Component {
  state = { showOverlay: true };
  handleToggle = () =>
    this.setState((prev) => ({ showOverlay: !prev.showOverlay }));

  render() {
    return (
      <div>
        <Stack
          horizontal
          horizontalAlign="space-between"
          style={{ padding: "12px" }}
        >
          <div>Title</div>
          <Stack horizontal>
            <button>Button1</button>
            <button onClick={this.handleToggle}>
              {`Button2 (${this.state.showOverlay ? "Hide" : "Show"} Overlay)`}
            </button>
            <button>Button3</button>
          </Stack>
        </Stack>
        <div
          style={{
            backgroundColor: "gray",
            width: "100%",
            height: "300px",
            position: "relative"
          }}
        >
          An editor
          <div
            style={{
              position: "absolute",
              inset: "0",
              backgroundColor: "rgba(0, 0, 0, 0.70)",
              display: this.state.showOverlay ? "flex" : "none",
              justifyContent: "center",
              alignItems: "center",
              color: "#fff"
            }}
          >
            A floating panel which is supposed to be always under "Button2" and
            overlays the editor.
          </div>
        </div>
      </div>
    );
  }
}

Keeping the original example (it had overlay on the whole component except for "Button 2") just in case if it might be useful.

Original

Not sure if I fully understand the desired result, but here is the component implemented with a toggle overlay controlled by Button2.

The overlay is currently set on top of and blocking all child elements except for Button2, so that it works as a "start editing" button, but it can be further adjusted to specify which element it covers to better suit the use case.

Quick demo of the example: codesandbox

import React from "react";
import { Stack } from "@fluentui/react";

export default class App extends React.Component {
  state = { showOverlay: true };
  handleToggle = () =>
    this.setState((prev) => ({ showOverlay: !prev.showOverlay }));

  render() {
    return (
      <div style={{ position: "relative", zIndex: "1" }}>
        <Stack
          horizontal
          horizontalAlign="space-between"
          style={{ padding: "12px" }}
        >
          <div>Title</div>
          <Stack horizontal>
            <button>Button1</button>
            <button style={{ zIndex: "75" }} onClick={this.handleToggle}>
              {`Button2 (${this.state.showOverlay ? "Hide" : "Show"} Overlay)`}
            </button>
            <button>Button3</button>
          </Stack>
        </Stack>
        <div
          style={{
            position: "absolute",
            inset: "0",
            backgroundColor: "rgba(0, 0, 0, 0.70)",
            zIndex: "50",
            display: this.state.showOverlay ? "flex" : "none",
            justifyContent: "center",
            alignItems: "center",
            color: "#fff",
          }}
        >
          A floating panel which is supposed to be always under "Button2" and
          overlays the editor.
        </div>
        <div
          style={{
            backgroundColor: "gray",
            width: "100%",
            height: "300px",
          }}
        >
          An editor
        </div>
      </div>
    );
  }
}