Tôi cần hỗ trợ với việc phủ một cá nhân divlên trên một cá nhân khác div.
Mã của tôi trông như thế này:
<div class="navi"></div>
<div id="infoi">
<img src="info_icon2.png" height="20" width="32"/>
</div>
Thật không may, tôi không thể làm tổ div#infoihoặc imgbên trong đầu tiên div.navi.
Nó phải là hai divs riêng biệt như được hiển thị, nhưng tôi cần biết làm thế nào tôi có thể đặt phía div#infoitrên div.navivà bên phải hầu hết và tập trung ở trên cùng của div.navi.
Câu trả lời:
#container {
width: 100px;
height: 100px;
position: relative;
}
#navi,
#infoi {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#infoi {
z-index: 10;
}<div id="container">
<div id="navi">a</div>
<div id="infoi">
<img src="https://appharbor.com/assets/images/stackoverflow-logo.png" height="20" width="32" />b
</div>
</div>Tôi sẽ đề nghị tìm hiểu về position: relativevà các yếu tố trẻ em với position: absolute.
absoluteCác phần tử định vị ly được định vị tương đối so với position:absolute|relative|fixedphần tử cha được định vị rõ ràng ( ) gần nhất của chúng . chỉ cần làm rõ thêm ... jsfiddle.net/p5jkc8gz
Giải pháp được chấp nhận hoạt động rất tốt, nhưng IMO thiếu một lời giải thích về lý do tại sao nó hoạt động. Ví dụ dưới đây được đưa vào các khái niệm cơ bản và tách CSS quan trọng khỏi CSS kiểu dáng không liên quan. Như một phần thưởng, tôi cũng đã bao gồm một lời giải thích chi tiết về cách hoạt động của định vị CSS.
TLDR; nếu bạn chỉ muốn mã, cuộn xuống Kết quả .
Có hai riêng biệt, anh chị em, các yếu tố và mục tiêu là để xác định vị trí phần tử thứ hai (với một idsố infoi), vì vậy nó xuất hiện trong các yếu tố trước đó (một với một classsố navi). Cấu trúc HTML không thể thay đổi.
Để đạt được kết quả mong muốn, chúng tôi sẽ di chuyển, hoặc vị trí, phần tử thứ hai, mà chúng tôi sẽ gọi #infoiđể nó xuất hiện trong phần tử đầu tiên, chúng tôi sẽ gọi .navi. Cụ thể, chúng tôi muốn #infoiđược định vị ở góc trên bên phải .navi.
CSS có một số thuộc tính cho các yếu tố định vị. Theo mặc định, tất cả các yếu tố là position: static. Điều này có nghĩa là phần tử sẽ được định vị theo thứ tự của nó trong cấu trúc HTML, với một vài ngoại lệ.
Khác positiongiá trị relative, absolute, sticky, và fixed. Bằng cách đặt một phần tử positionthành một trong những giá trị khác, giờ đây có thể sử dụng kết hợp bốn thuộc tính sau để định vị phần tử:
toprightbottomleftNói cách khác, bằng cách cài đặt position: absolute, chúng ta có thể thêm top: 100pxvào vị trí phần tử 100 pixel từ đầu trang. Ngược lại, nếu chúng ta đặt bottom: 100pxthành phần sẽ được định vị 100 pixel từ cuối trang.
Đây là nơi nhiều người mới CSS bị lạc -position: absolutecó một khung tham chiếu. Trong ví dụ trên, khung tham chiếu làbodyphần tử. position: absolutevớitop: 100pxnghĩa là phần tử được định vị 100 pixel từ đỉnh củabodyphần tử.
Khung vị trí của tham chiếu hoặc bối cảnh vị trí, có thể được thay đổi bằng cách đặt positionphần tử cha thành bất kỳ giá trị nào khácposition: static . Đó là, chúng ta có thể tạo bối cảnh vị trí mới bằng cách đưa ra một phần tử cha:
position: relative;position: absolute;position: sticky;position: fixed;Ví dụ: nếu một <div class="parent">phần tử được đưa ra position: relative, bất kỳ phần tử con nào cũng sử dụng <div class="parent">làm bối cảnh vị trí của chúng. Nếu một phần tử con được đưa ra position: absolutevà top: 100px, phần tử đó sẽ được định vị 100 pixel từ đỉnh của <div class="parent">phần tử, vì <div class="parent">bây giờ là bối cảnh vị trí.
Yếu tố khác cần lưu ý là thứ tự ngăn xếp - hoặc cách các yếu tố được xếp chồng theo hướng z. Điều cần biết ở đây là thứ tự ngăn xếp của các phần tử, theo mặc định, được xác định bởi sự đảo ngược thứ tự của chúng trong cấu trúc HTML. Hãy xem xét ví dụ sau:
<body>
<div>Bottom</div>
<div>Top</div>
</body>
Trong ví dụ này, nếu hai <div>phần tử được định vị ở cùng một vị trí trên trang, <div>Top</div>phần tử sẽ bao phủ <div>Bottom</div>phần tử. Vì <div>Top</div>xuất hiện sau <div>Bottom</div>trong cấu trúc HTML, nó có thứ tự xếp chồng cao hơn.
Thứ tự sắp xếp có thể được thay đổi bằng CSS bằng cách sử dụng z-indexhoặc ordercác thuộc tính.
Chúng ta có thể bỏ qua thứ tự sắp xếp trong vấn đề này vì cấu trúc HTML tự nhiên của các phần tử có nghĩa là phần tử mà chúng ta muốn xuất hiện xuất hiện topsau phần tử khác.
Vì vậy, quay trở lại vấn đề trong tay - chúng tôi sẽ sử dụng bối cảnh vị trí để giải quyết vấn đề này.
Như đã nêu ở trên, mục tiêu của chúng tôi là định vị #infoiphần tử để nó xuất hiện trong .naviphần tử. Để làm điều này, chúng tôi sẽ bọc .navivà #infoicác yếu tố trong một yếu tố mới <div class="wrapper">để chúng tôi có thể tạo bối cảnh vị trí mới.
<div class="wrapper">
<div class="navi"></div>
<div id="infoi"></div>
</div>
Sau đó tạo bối cảnh vị trí mới bằng cách đưa ra .wrappera position: relative.
.wrapper {
position: relative;
}
Với bối cảnh vị trí mới này, chúng ta có thể định vị #infoitrong .wrapper. Đầu tiên, đưa ra #infoimột position: absolute, cho phép chúng tôi vị trí #infoihoàn toàn trong .wrapper.
Sau đó thêm top: 0và right: 0định vị #infoiphần tử ở góc trên bên phải. Hãy nhớ rằng, vì #infoiphần tử đang sử dụng .wrapperlàm bối cảnh vị trí của nó, nên nó sẽ nằm ở phía trên bên phải của .wrapperphần tử.
#infoi {
position: absolute;
top: 0;
right: 0;
}
Bởi vì .wrapperchỉ đơn thuần là một thùng chứa .navi, định vị #infoiở góc trên bên phải .wrappermang lại hiệu quả của việc được định vị ở góc trên bên phải .navi.
Và ở đó chúng tôi có nó, #infoibây giờ dường như ở góc trên bên phải của .navi.
Ví dụ dưới đây được đưa vào những điều cơ bản và chứa một số kiểu dáng tối thiểu.
Đây là một giải pháp thay thế sử dụng CSS Grid để định vị .naviphần tử với #infoiphần tử ở phía bên phải. Tôi đã sử dụng các gridthuộc tính dài dòng để làm cho nó rõ ràng nhất có thể.
Trong trường hợp chúng tôi không thể chỉnh sửa bất kỳ HTML nào, có nghĩa là chúng tôi không thể thêm phần tử trình bao bọc, chúng tôi vẫn có thể đạt được hiệu quả mong muốn.
Thay vì sử dụng position: absolutetrên #infoiphần tử, chúng tôi sẽ sử dụng position: relative. Điều này cho phép chúng ta định vị lại #infoiphần tử từ vị trí mặc định bên dưới .naviphần tử. Với position: relativechúng ta có thể sử dụng một topgiá trị âm để di chuyển nó lên từ vị trí mặc định của nó và leftgiá trị 100%trừ đi một vài pixel, bằng cách sử dụng left: calc(100% - 52px), để đặt nó ở gần bên phải.
Bằng cách sử dụng divkiểu có z-index:1;và position: absolute;bạn có thể phủ divlên bất kỳ kiểu nào khác div.
z-indexxác định thứ tự divs 'stack'. Một div có mức cao hơn z-indexsẽ xuất hiện trước một div có mức thấp hơn z-index. Lưu ý rằng tài sản này chỉ hoạt động với các yếu tố định vị .
Đặc tả Grid CSS mới cung cấp một giải pháp thanh lịch hơn nhiều. Việc sử dụng position: absolutecó thể dẫn đến các vấn đề chồng chéo hoặc mở rộng trong khi Grid sẽ cứu bạn khỏi các bản hack CSS bẩn.
Ví dụ lớp phủ lưới tối thiểu nhất:
HTML
<div class="container">
<div class="content">This is the content</div>
<div class="overlay">Overlay - must be placed under content in the HTML</div>
</div>CSS
.container {
display: grid;
}
.content, .overlay {
grid-area: 1 / 1;
}Đó là nó. Nếu bạn không xây dựng cho Internet Explorer, mã của bạn rất có thể sẽ hoạt động.
Dưới đây là một giải pháp đơn giản 100% dựa trên CSS. "Bí mật" là sử dụng display: inline-blockphần tử trong trình bao bọc. Trong vertical-align: bottomhình ảnh là một bản hack để khắc phục phần đệm 4px mà một số trình duyệt thêm vào sau phần tử.
Lời khuyên : nếu phần tử trước trình bao bọc là nội tuyến, chúng có thể kết thúc lồng nhau. Trong trường hợp này, bạn có thể "bọc bọc" bên trong một thùng chứa display: block- thường là tốt và cũ div.
.wrapper {
display: inline-block;
position: relative;
}
.hover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 188, 212, 0);
transition: background-color 0.5s;
}
.hover:hover {
background-color: rgba(0, 188, 212, 0.8);
// You can tweak with other background properties too (ie: background-image)...
}
img {
vertical-align: bottom;
}<div class="wrapper">
<div class="hover"></div>
<img src="http://placehold.it/450x250" />
</div>Đây là những gì bạn cần:
function showFrontLayer() {
document.getElementById('bg_mask').style.visibility='visible';
document.getElementById('frontlayer').style.visibility='visible';
}
function hideFrontLayer() {
document.getElementById('bg_mask').style.visibility='hidden';
document.getElementById('frontlayer').style.visibility='hidden';
}#bg_mask {
position: absolute;
top: 0;
right: 0; bottom: 0;
left: 0;
margin: auto;
margin-top: 0px;
width: 981px;
height: 610px;
background : url("img_dot_white.jpg") center;
z-index: 0;
visibility: hidden;
}
#frontlayer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 70px 140px 175px 140px;
padding : 30px;
width: 700px;
height: 400px;
background-color: orange;
visibility: hidden;
border: 1px solid black;
z-index: 1;
}
</style><html>
<head>
<META HTTP-EQUIV="EXPIRES" CONTENT="-1" />
</head>
<body>
<form action="test.html">
<div id="baselayer">
<input type="text" value="testing text"/>
<input type="button" value="Show front layer" onclick="showFrontLayer();"/> Click 'Show front layer' button<br/><br/><br/>
Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing textsting text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
<div id="bg_mask">
<div id="frontlayer"><br/><br/>
Now try to click on "Show front layer" button or the text box. It is not active.<br/><br/><br/>
Use position: absolute to get the one div on top of another div.<br/><br/><br/>
The bg_mask div is between baselayer and front layer.<br/><br/><br/>
In bg_mask, img_dot_white.jpg(1 pixel in width and height) is used as background image to avoid IE browser transparency issue;<br/><br/><br/>
<input type="button" value="Hide front layer" onclick="hideFrontLayer();"/>
</div>
</div>
</div>
</form>
</body>
</html>Tôi không phải là một lập trình viên cũng không phải là chuyên gia về CSS, nhưng tôi vẫn đang sử dụng ý tưởng của bạn trong các thiết kế web của mình. Tôi cũng đã thử các độ phân giải khác nhau:
#wrapper {
margin: 0 auto;
width: 901px;
height: 100%;
background-color: #f7f7f7;
background-image: url(images/wrapperback.gif);
color: #000;
}
#header {
float: left;
width: 100.00%;
height: 122px;
background-color: #00314e;
background-image: url(images/header.jpg);
color: #fff;
}
#menu {
float: left;
padding-top: 20px;
margin-left: 495px;
width: 390px;
color: #f1f1f1;
}<div id="wrapper">
<div id="header">
<div id="menu">
menu will go here
</div>
</div>
</div>Tất nhiên sẽ có một vỏ bọc xung quanh cả hai. Bạn có thể kiểm soát vị trí của div menu sẽ được hiển thị trong div tiêu đề với lề trái và vị trí trên cùng. Bạn cũng có thể đặt menu div nổi ngay nếu bạn thích.
Dưới đây là một ví dụ đơn giản để mang lại hiệu ứng lớp phủ với biểu tượng tải trên div khác.
<style>
#overlay {
position: absolute;
width: 100%;
height: 100%;
background: black url('icons/loading.gif') center center no-repeat; /* Make sure the path and a fine named 'loading.gif' is there */
background-size: 50px;
z-index: 1;
opacity: .6;
}
.wraper{
position: relative;
width:400px; /* Just for testing, remove width and height if you have content inside this div */
height:500px; /* Remove this if you have content inside */
}
</style>
<h2>The overlay tester</h2>
<div class="wraper">
<div id="overlay"></div>
<h3>Apply the overlay over this div</h3>
</div>Dùng thử tại đây: http://jsbin.com/fotozolucu/edit?html,css,output
overflow: hidden,overflow: visiblethay vào đó hãy sử dụng .