cuốn sách gpt4 ai đã làm

html - 你能把 'stack' 一个 div *上面* 一个 div 设置为显示 : table-cell?

In lại Tác giả: Walker 123 更新时间:2023-11-28 07:59:42 28 4
mua khóa gpt4 Nike

我正在尝试创建一个切换开关,您可以在其中点击一侧,然后背景会滑过以使该侧“处于事件状态”。

为了适应可变宽度,我使用 display: table 设置了切换的两侧。这很好用。然后,我将第三个 div 添加到组合中,作为将来回滑动的“事件按钮”。

问题出在第 3 个 div。当我需要它时,它最终位于文本之上。我希望 z-index 可以解决这个问题,但没有。有没有办法在这里完成我想要的?

HTML:



1

2




CSS:

.wrapper {
nổi: trái;
tràn: tự động;
vị trí: tương đối;
đường viền: 1px màu đỏ đậm;
}

.tbl {
hiển thị: bảng;
đường viền: 1px màu xanh đậm;
}

.tbl-cl {
hiển thị: ô bảng;
phần đệm: 10px;
chiều rộng: 50%;
z-index: 2;
}

.bgnd {
vị trí: tuyệt đối;
top: 0px;
left: 0px;
đường viền: 1px màu xanh lá cây;
background: rgba(255,0,0,.8);
chiều rộng: 50%;
chiều cao: 100%;
chỉ số z: 1;
}

Live Demo @jsbin

câu trả lời hay nhất

您可以通过将 .bgnd 元素作为 CSS 表格的同级元素来实现布局。

然后您可以通过调整左侧偏移量将“ slider ”向右移动。

Để ý:您可以将 .bgnd 元素保留为 .tbl 的子元素,CSS 将具有相同的效果。

.wrapper {
nổi: trái;
tràn: tự động;
vị trí: tương đối;
đường viền: 1px màu đỏ đậm;
}
.tbl {
hiển thị: bảng;
đường viền: 1px màu xanh đậm;
}
.tbl-cl {
hiển thị: ô bảng;
phần đệm: 10px;
chiều rộng: 50%;
z-index: 2;
}
.bgnd {
vị trí: tuyệt đối;
top: 0px;
left: 0px;
đường viền: 1px màu xanh lá cây;
background: rgba(255, 0, 0, 1);
trên cùng: 0;
left: 0%; /* set to 50% to slide to right */
chiều rộng: 50%;
đáy: 0;
chỉ số z: -1;
kích thước hộp: hộp viền;
}


1

2



关于html - 你能把 'stack' 一个 div *上面* 一个 div 设置为显示 : table-cell?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29856200/

28 4 0
Walker 123
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress