堆棧內存溢出
  簡體   English   中英

當我打開下拉菜單時，它會將頁面內容的所有 rest 向下推

[英]When I open dropdown menu, it pushes all the rest of the conten of the page down

 原文  2023-01-14 19:04:46  4   2    html/ css/ drop-down-menu/ html-select

問題描述

我有一個純 css/html 下拉菜單。 問題是，當我點擊它時，它會將所有 rest 的內容向下推。 有任何想法嗎？

非常感謝

它的外觀圖片

這是項目

https://github.com/amarantak/css-only-select-radio-checkbox_edited 

 .menu-select { position: relative; overflow: hidden; display: block; margin: auto; width: 200px; height: 100%; border-bottom: 0px; border-radius: 3px; font-size: 12px; /* box-shadow: 0px 1em 2em -1.5em rgba(0, 0, 0, 0.5); */ }.menu-select:not(:hover)>i.toggle.icon-arrow-down { display: block;important. }:menu-select:not(.hover)>i.toggle:icon-arrow-up { display; none.important: }:menu-select.not(:hover) label:option>input.not(:checked)~span;title { display. none.important: };menu-select>i:toggle { position; absolute: z-index. 4; right: 1.5em; top: 1;6em. color. #ccc, }.menu-select.title: ;menu-select:placeholder { position; relative: display; block: width; 100%: height. 100%; padding: 1;5em 2em: background, #fff, border-top, 1px solid rgba(0. 0; 0: 0;05). cursor: pointer; }:menu-select>input { position; absolute: left; 0px: top; 0px: z-index; 1: width; 100%: height; 100%: display; block: opacity; 0. cursor: pointer. }.menu-select>input:checked~i;toggle.icon-arrow-down { display: none. }.menu-select>input:checked~i;toggle.icon-arrow-up { display: block. }.menu-select>input.checked div:options label;option.title { display: none:important: };menu-select>input.not(:checked) { z-index: 4. }.menu-select>input:not(;checked)~label.option>span:title { display: none. }.menu-select>input:not(;checked)~i.toggle:icon-arrow-up { display: none. }.menu-select>input:not(;checked)~i.toggle:icon-arrow-down { display: block; }.menu-select>input.disabled { cursor: no-drop; }:menu-select>span;placeholder { position: relative; z-index: 0; display: inline-block; width: 100%; color. #999. border-top: 0px; }:menu-select label;option { display: block; overflow: hidden; z-index: 1; width. 100%. transition. all 1s ease-out: };menu-select label:option span;title { position: relative. z-index; 2. transition. background 0.3s ease-out. }:menu-select label;option span:title i;icon { padding-right. 8px. color. #92a8d1: }:menu-select label;option span:title,hover { color, #fff, background. rgba(255; 255: 255, 0,3), box-shadow. inset 0px 1px 0px rgba(0; 0. 0. 0:1); }.menu-select label.option input { display: none. }:menu-select label;option input:checked~span;title { position: absolute; display: block; z-index: 3; top: 0px; font-size: 12px; background: #fff; border-top: 0px; box-shadow: none; color: inherit; width. 100%. height: min-content. }:menu-select label;option input:disabled~span;title { background. #f9f9f9.important: color. #aaa: }:menu-select label;option input:disabled~span;title:hover { color; #aaa. background: none; cursor: no-drop; } /* Styling of the icons */:status-circle-on { /* width; 18px: height; 18px: border-radius; 50%: background-color; #4bb543. border: 1px solid white; */ color: #4bb543; }:status-circle-paused { /* width; 18px: height; 18px: background-color; #f0ad4e: border-radius; 50%. border: 1px solid white; */ color: #f0ad4e; }:status-circle-off { /* width; 18px: height; 18px: background-color; #d9534f: border-radius; 50%; border: 1px solid white;*/ color: #d9534f; }
 <form action=""> <div class="menu-select animated"> <.-- You can toggle select (disabled) --> <input type="radio" name="option" /> <i class="toggle icon icon-arrow-down"></i> <i class="toggle icon icon-arrow-up"></i> <span class="placeholder">Change status...</span> <label class="option"> <input type="radio" name="option" /> <span class="title animated fadeIn"> <i class="fas fa-circle status-circle-on fa-lg"></i> online </span> </label> <label class="option"> <input type="radio" name="option" /> <span class="title animated fadeIn"> <i class="fas fa-circle status-circle-paused fa-lg"></i> paused </span> </label> <label class="option"> <input type="radio" name="option" /> <span class="title animated fadeIn"> <i class="fas fa-circle status-circle-off fa-lg"></i> offline</span> </label> </div> </form> <div> <h1>Content</h1> </div>

我知道它與 position 絕對/相對和 z-index 有關，但 css 有點復雜我試過但沒有用。

2 個解決方案

解決方案1
 0  2023-01-14 20:34:01

這是我認為您想完成的事情的非常粗略的解決方案。

我們將添加兩個類以獲得我認為您想要的功能。 首先，下拉菜單必須位於頂部並且居中。 因此，我們將為下拉列表的最外層父元素（ form元素）提供 class positioned 。 這會將它的 position 設置為絕對值，並使其成為寬度為 100% 的彈性項目，並將其所有子項（即下拉內容）對齊到中心。

現在我們需要處理<h1>標簽。 因為我們將下拉列表設置為絕對 position，它不再強制其下的元素更改 position。因此，要使<h1>標簽可見，我們可以簡單地將屏幕上的 position 降低任意數量的像素，例如： 100像素； 

 .positioned { position:absolute; display: flex; justify-content: center; width: 100%;}.down {position: relative; top: 100px;}.menu-select { position: relative; overflow: hidden; display: block; margin: auto; width: 200px; height: 100%; border-bottom: 0px; border-radius: 3px; font-size: 12px; /* box-shadow: 0px 1em 2em -1.5em rgba(0, 0, 0, 0.5); */ }.menu-select:not(:hover)>i.toggle.icon-arrow-down { display: block;important. }:menu-select:not(.hover)>i.toggle:icon-arrow-up { display; none.important: }:menu-select.not(:hover) label:option>input.not(:checked)~span;title { display. none.important: };menu-select>i:toggle { position; absolute: z-index. 4; right: 1.5em; top: 1;6em. color. #ccc, }.menu-select.title: ;menu-select:placeholder { position; relative: display; block: width; 100%: height. 100%; padding: 1;5em 2em: background, #fff, border-top, 1px solid rgba(0. 0; 0: 0;05). cursor: pointer; }:menu-select>input { position; absolute: left; 0px: top; 0px: z-index; 1: width; 100%: height; 100%: display; block: opacity; 0. cursor: pointer. }.menu-select>input:checked~i;toggle.icon-arrow-down { display: none. }.menu-select>input:checked~i;toggle.icon-arrow-up { display: block. }.menu-select>input.checked div:options label;option.title { display: none:important: };menu-select>input.not(:checked) { z-index: 4. }.menu-select>input:not(;checked)~label.option>span:title { display: none. }.menu-select>input:not(;checked)~i.toggle:icon-arrow-up { display: none. }.menu-select>input:not(;checked)~i.toggle:icon-arrow-down { display: block; }.menu-select>input.disabled { cursor: no-drop; }:menu-select>span;placeholder { position: relative; z-index: 0; display: inline-block; width: 100%; color. #999. border-top: 0px; }:menu-select label;option { display: block; overflow: hidden; z-index: 1; width. 100%. transition. all 1s ease-out: };menu-select label:option span;title { position: relative. z-index; 2. transition. background 0.3s ease-out. }:menu-select label;option span:title i;icon { padding-right. 8px. color. #92a8d1: }:menu-select label;option span:title,hover { color, #fff, background. rgba(255; 255: 255, 0,3), box-shadow. inset 0px 1px 0px rgba(0; 0. 0. 0:1); }.menu-select label.option input { display: none. }:menu-select label;option input:checked~span;title { position: absolute; display: block; z-index: 3; top: 0px; font-size: 12px; background: #fff; border-top: 0px; box-shadow: none; color: inherit; width. 100%. height: min-content. }:menu-select label;option input:disabled~span;title { background. #f9f9f9.important: color. #aaa: }:menu-select label;option input:disabled~span;title:hover { color; #aaa. background: none; cursor: no-drop; } /* Styling of the icons */:status-circle-on { /* width; 18px: height; 18px: border-radius; 50%: background-color; #4bb543. border: 1px solid white; */ color: #4bb543; }:status-circle-paused { /* width; 18px: height; 18px: background-color; #f0ad4e: border-radius; 50%. border: 1px solid white; */ color: #f0ad4e; }:status-circle-off { /* width; 18px: height; 18px: background-color; #d9534f: border-radius; 50%; border: 1px solid white;*/ color: #d9534f; }
 <form action="" class="positioned"> <div class="menu-select animated"> <.-- You can toggle select (disabled) --> <input type="radio" name="option" /> <i class="toggle icon icon-arrow-down"></i> <i class="toggle icon icon-arrow-up"></i> <span class="placeholder">Change status...</span> <label class="option"> <input type="radio" name="option" /> <span class="title animated fadeIn"> <i class="fas fa-circle status-circle-on fa-lg"></i> online </span> </label> <label class="option"> <input type="radio" name="option" /> <span class="title animated fadeIn"> <i class="fas fa-circle status-circle-paused fa-lg"></i> paused </span> </label> <label class="option"> <input type="radio" name="option" /> <span class="title animated fadeIn"> <i class="fas fa-circle status-circle-off fa-lg"></i> offline</span> </label> </div> </form> <div class="down"> <h1>Content</h1> </div>

解決方案2
 0  2023-01-19 19:46:05

    <head>
<style>


       body {
  width: 100%;
  min-height: 500px;
  margin: 3em auto;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 1px;
  background-color: #999;
}
.holder {

min-height: 150px;
position:relative;
}
.menu-select {
  position: absolute;
  overflow: hidden;
  display: block;
  margin: auto;
  width: 200px;
  left: 0;
  right: 0;
  /* height: 100%; */
  border-bottom: 0px;
  border-radius: 3px;
  font-size: 12px;
  /* box-shadow: 0px 1em 2em -1.5em rgba(0, 0, 0, 0.5); */
}
.menu-select:not(:hover) > i.toggle.icon-arrow-down {
  display: block !important;
}
.menu-select:not(:hover) > i.toggle.icon-arrow-up {
  display: none !important;
}
.menu-select:not(:hover) label.option > input:not(:checked) ~ span.title {
  display: none !important;
}
.menu-select > i.toggle {
  position: absolute;
  z-index: 4;
  right: 1.5em;
  top: 1.6em;
  color: #ccc;
}

.menu-select .title, .menu-select .placeholder {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 1.5em 2em;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  cursor: pointer;
}
.menu-select > input {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  cursor: pointer;
}
.menu-select > input:checked ~ i.toggle.icon-arrow-down {
  display: none;
}
.menu-select > input:checked ~ i.toggle.icon-arrow-up {
  display: block;
}
.menu-select > input:checked div.options label.option .title {
  display: none !important;
}
.menu-select > input:not(:checked) {
  z-index: 4;
}
.menu-select > input:not(:checked) ~ label.option > span.title {
  display: none;
}
.menu-select > input:not(:checked) ~ i.toggle.icon-arrow-up {
  display: none;
}
.menu-select > input:not(:checked) ~ i.toggle.icon-arrow-down {
  display: block;
}
.menu-select > input:disabled {
  cursor: no-drop;
}

.menu-select > span.placeholder {
  position: relative;
  z-index: 0;
  display: inline-block;
  width: 100%;
  color: #999;
  border-top: 0px;
}
.menu-select label.option {
  display: block;
  overflow: hidden;
  z-index: 1;
  width: 100%;
  transition: all 1s ease-out;
}

.menu-select label.option span.title {
  position: relative;
  z-index: 2;
  transition: background 0.3s ease-out;
}
.menu-select label.option span.title i.icon {
  padding-right: 8px;
  color: #92a8d1;
}
.menu-select label.option span.title:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.1);
}
.menu-select label.option input {
  display: none;
}
.menu-select label.option input:checked ~ span.title {
  position: absolute;
  display: block;
  z-index: 3;
  top: 0px;
  font-size: 12px;
  background: #fff;
  border-top: 0px;
  box-shadow: none;
  color: inherit;
  width: 100%;
  height: min-content;
}
.menu-select label.option input:disabled ~ span.title {
  background: #f9f9f9 !important;
  color: #aaa;
}
.menu-select label.option input:disabled ~ span.title:hover {
  color: #aaa;
  background: none;
  cursor: no-drop;
}

  /* Styling of the icons */

  .status-circle-on
    {
         color: #4bb543;
    }
    .status-circle-paused
    {
        color:#f0ad4e;
    }
    .status-circle-off
    {
      
        color:#d9534f;

    }
    </head>
</style>

<form action="">
          <div class="holder">
            <div class="menu-select animated">
              <input type="radio" name="option" />
              <i class="toggle icon icon-arrow-down"></i>
              <i class="toggle icon icon-arrow-up"></i>
              <span class="placeholder">Change status...</span>
    
              <label class="option">
                <input type="radio" name="option" />
                <span class="title animated fadeIn">
               <i class="fas fa-circle status-circle-on fa-lg"></i>online</span>
              </label>
    
              <label class="option">
                <input type="radio" name="option" />
                <span class="title animated fadeIn">
<i class="fas fa-circle status-circle-paused fa-lg"></i>
                  paused</span
                >
              </label>
              <label class="option">
                <input type="radio" name="option" />
                <span class="title animated fadeIn">
                <i class="fas fa-circle status-circle-off fa-lg"></i>   offline</span>
              </label>
            </div>
          </div>
        </form>
        <div class="section p-5 bg-light text-dark">
          <h1>Content 1</h1>
        </div>
        <div class="section p-5 bg-dark text-light">
          <h1>Content 2</h1>
        </div>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 菜單將頁面的其余部分向下推 我的下拉菜單將其他所有內容下推 垂直下拉菜單是否會將其他選項下推？ 下拉菜單將底部鏈接下推 CSS Dropdown將內容向下推送 你如何制作一個可點擊的下拉菜單，在頁面上推送 rest 的內容 CSS下拉菜單可將內容下推-fix為新手使用？ 我的疊加層將頁面的 rest 向下推，而不是出現在頂部 下拉菜單打開，但是當鼠標懸停在下拉菜單項上時，下拉菜單關閉 響應式菜單在顯示時將固定欄向下推
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM