我想要一个整页的固定边框,该边框可以覆盖页面上的所有内容,但仍允许用户与页面互动。
但是,由于它是位于其他内容之上的整页div,因此它不允许用户与它下面页面上的所有内容进行交互(即,无法单击链接)。设置div的z-index
似乎没有意义,因为那样一来内容就可以覆盖它,而user-select:none
似乎对div也没有任何作用。
这是我的视口边框样式:
position: fixed;
top: 0;
left: 0;
border: 36px solid var(--ccs-yellow);
width: 100%;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
此代码成功在视口周围放置了边框,所有页面内容确实都位于其后,但是,因为它位于视口的顶部,因此可以防止与页面进行交互。有帮助吗?
答案 0 :(得分:2)
只需添加:
pointer-events : none;
你很好。没有光标交互,点击会持续进行。
答案 1 :(得分:0)
只需使用几个插入box-shadow
即可。无需其他定位元素和z-index
问题。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
body {
padding: 12px;
box-shadow: inset 36px 36px 0px 0px yellow, inset -36px -36px 0px 0px yellow
}
p:hover {
color: red;
}
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis provident dolor nihil, pariatur, animi mollitia, quod distinctio dolores officiis at accusamus fugit itaque architecto quidem nisi natus sapiente id modi adipisci numquam quo praesentium maxime.
Accusantium libero animi est aut maxime eos corporis similique commodi, quaerat quasi, alias reiciendis saepe, nesciunt cumque maiores praesentium harum architecto sed! Rem repudiandae adipisci quod minus veniam, commodi qui, ullam harum nihil quasi
voluptatum nesciunt asperiores iste labore vel repellat possimus! Est, commodi exercitationem! Atque veritatis excepturi similique neque debitis aperiam placeat, eius hic fugiat quas at officiis dolore accusantium unde nesciunt cumque est. Sequi quo
quas quaerat accusantium minima, illum aut obcaecati numquam nulla deserunt necessitatibus, rem ipsum! Quisquam deleniti enim soluta rerum debitis. Ad officia, fuga nostrum maxime inventore at error. Eligendi quos quae doloribus sint odio voluptas minus
optio facere reprehenderit est, perferendis nesciunt eos dolorem! Est consectetur sequi reiciendis quo eveniet cumque incidunt facilis commodi nobis laudantium quibusdam error culpa, eos eaque quod officiis iste id tempora aut non repudiandae. Dolores,
iure quidem? Omnis, eligendi magni quo nam veniam, voluptas numquam ut a libero soluta eius illum dicta modi excepturi, repellat consequatur error? Fugiat deleniti consequuntur, nemo quam autem explicabo? Impedit rem, voluptatem atque eaque labore repellendus
minima libero tenetur unde voluptas eius, ut quas quis pariatur vitae, ipsam nostrum maxime praesentium quos nesciunt mollitia laudantium consequatur. Expedita, blanditiis quos laboriosam odit itaque consequatur sapiente aliquid perspiciatis? Aperiam,
placeat assumenda. Repellat corporis debitis nostrum. Saepe id eligendi dolore. Laudantium fugiat reiciendis aspernatur assumenda eum similique quod, deserunt quae omnis, vitae culpa quis alias odit nisi temporibus soluta accusantium quia? Facilis ratione
culpa maiores hic impedit optio, aspernatur ut tenetur porro eum, sunt ipsam maxime animi molestias asperiores similique obcaecati enim illum vero saepe vitae, soluta nulla! Delectus adipisci fugiat sapiente, voluptas deleniti dolor exercitationem eaque
quibusdam laboriosam dolore aperiam quisquam, culpa facere illo esse. Vel, sequi dolorum nihil incidunt ullam alias. Mollitia quibusdam blanditiis ab in cum hic, pariatur totam dolor cupiditate explicabo praesentium officia earum aliquam ad laudantium
sapiente nihil dolorum distinctio quis. Debitis, explicabo? Commodi at laboriosam sapiente repudiandae eum ipsam, quibusdam temporibus accusantium eos similique, beatae vero magni est tenetur perspiciatis. Exercitationem, itaque nam? Rerum quasi nobis
reiciendis quis eius veniam. Expedita magnam totam provident a sapiente harum ipsum unde non commodi! Possimus pariatur delectus accusamus optio suscipit fuga quas aliquam! Tempora ipsa nisi nihil rerum officia. Officiis suscipit laudantium quo quod,
libero officia voluptates eveniet nesciunt beatae quos cupiditate corrupti enim veritatis consequuntur, totam temporibus ullam earum corporis quasi nam velit aspernatur. Cupiditate atque sed ullam illo minima reprehenderit aperiam ipsa eius deserunt
minus odit, nihil ducimus rerum enim quasi, nisi architecto perferendis aliquam cum esse, sequi quod autem laborum dicta? Quam animi vitae doloremque pariatur quia distinctio tempora harum reprehenderit rem, assumenda officiis perspiciatis voluptatibus
omnis dolorem deserunt iure iste veniam aspernatur ipsam esse magni, nesciunt hic facere illum. Ipsa id laboriosam neque ad ab quibusdam tenetur dolor maiores eius sit, mollitia magni aut at illum suscipit, deserunt delectus esse consectetur quo odio
consequuntur dignissimos? Minima corrupti iure praesentium id repellendus magni labore beatae facilis? Animi, illo incidunt doloremque error maxime laboriosam in nemo perspiciatis eum recusandae ea doloribus officiis voluptatum dolorem fugiat commodi
reiciendis adipisci fuga beatae. Harum aliquam sint a, qui ad, porro aliquid expedita enim quod odit dolores laudantium, deleniti aperiam labore velit rem veniam nihil accusantium quidem magni ea. Officia velit ipsam sequi laborum odio eos, eum repudiandae
sit odit nisi dignissimos, cum deserunt numquam quae nesciunt! Quam vel molestiae culpa omnis sit nostrum modi non totam possimus mollitia neque veniam obcaecati nemo, voluptatem minima, id atque debitis sint similique amet temporibus eum! Corporis
quas fugiat necessitatibus mollitia, reiciendis, commodi tenetur, libero dolorum recusandae aspernatur veniam accusamus culpa possimus adipisci maiores temporibus perferendis incidunt voluptatibus doloribus placeat. Ea soluta voluptatem maiores adipisci
nam quibusdam sapiente harum, tempore, tempora placeat eos ipsa facere ut vero eius. Modi velit suscipit facere quas vel aliquid eum ut tempore deserunt assumenda? Quod quo assumenda rerum totam nostrum laborum. Harum, quisquam! Doloremque, ex deserunt
cupiditate voluptas labore neque facilis animi praesentium ipsum, sapiente possimus maiores nisi quod libero ipsam porro, laboriosam omnis fuga placeat numquam? Iure adipisci eaque neque minima minus quis, fuga quod eius cumque perferendis suscipit
asperiores unde reprehenderit beatae ducimus omnis saepe natus molestias quas libero. Tenetur ea exercitationem consequatur voluptatum perspiciatis laborum velit minus corrupti optio cum, voluptatibus reprehenderit, laboriosam quae error saepe vitae.
Officia iure aliquam ab vitae assumenda earum adipisci magnam maiores ipsa molestiae amet quasi ratione, quis voluptatum! Laboriosam natus eum nihil nisi velit perferendis officia sint labore tempore ea. Illo aut corrupti voluptate vel quod quisquam
magnam, hic rerum obcaecati vitae, doloribus rem delectus explicabo. Ipsum placeat veritatis libero voluptas officiis earum ipsam saepe voluptatum ex assumenda ut fugiat, ducimus nisi, eveniet laboriosam commodi adipisci nemo laborum nihil. Quas ex
voluptatem veniam voluptatibus, omnis reiciendis reprehenderit libero debitis repellat cum. Sint officia quasi soluta assumenda asperiores nihil modi quo neque dolor, delectus quibusdam quaerat, laborum ex nobis mollitia. Dolore labore fuga, officia
architecto nemo doloremque animi tempora aperiam, illo exercitationem rem quibusdam amet ab quasi quam minima voluptatibus explicabo rerum ut dolorum et voluptatum aliquid unde quos. Dolorum vitae repellat similique alias, explicabo repellendus eum
dolor dolore aliquid architecto dolores veritatis facilis doloremque iusto tenetur eaque laudantium in earum at reprehenderit rem. Veritatis fugit eaque laboriosam corrupti sit doloribus commodi nisi! Dicta distinctio ipsa vel inventore, dolorem dolores
molestiae in est nemo pariatur recusandae iste nisi, omnis blanditiis? Quibusdam eius est quaerat accusamus aliquam facilis dolore, dicta tenetur, dolores laborum, doloribus obcaecati. Sunt inventore voluptates minima, voluptatum ea, magnam voluptatibus
blanditiis laborum optio rem veniam nulla praesentium. Exercitationem fugit amet voluptates ducimus quisquam quae reprehenderit quod, debitis eum aliquid adipisci qui enim, eligendi illum deserunt harum nulla temporibus ab voluptatem dignissimos vero.
Amet cupiditate voluptatum beatae, error perferendis libero et, ex alias iusto neque fugiat iure distinctio ea deserunt cumque eius dolorem praesentium repudiandae ratione. Aut voluptates, consequatur molestiae necessitatibus nesciunt tenetur tempora
magni, cumque neque itaque fugit ipsum, repudiandae illo sapiente totam! Beatae magnam reiciendis veniam pariatur id placeat, eveniet laboriosam. Nisi eveniet odit, excepturi error quod nihil dignissimos ducimus ea eum! Harum, perspiciatis ea voluptas
iusto itaque id? A, delectus. Natus modi laudantium reprehenderit ipsa eaque! Odio quo quis, debitis veritatis tempore soluta fugiat incidunt porro ullam reiciendis alias minus tempora rem ipsum quod rerum accusamus. Debitis dolores possimus quam sapiente
harum sequi at laborum iure, aliquam non dolore aperiam nam placeat reiciendis velit beatae nesciunt. Voluptas reiciendis unde odit ab? Facilis minima voluptatem mollitia voluptas quaerat adipisci, id at autem expedita aliquid dolor recusandae commodi
ea laboriosam voluptatum vitae sapiente iusto exercitationem corrupti ipsa error? Ex repellat numquam possimus tenetur unde maiores explicabo! Voluptates neque, vero dignissimos ea fugit at necessitatibus consequuntur minima minus nulla aliquid odio
mollitia id quidem. Totam iste cum, quae voluptatum eligendi fuga mollitia soluta quia veritatis delectus molestias est culpa amet ut consequatur doloremque nihil assumenda eius aliquam cumque. Consequuntur ut nihil necessitatibus fugiat quisquam laudantium.
Voluptatem aliquam, obcaecati incidunt molestias quisquam beatae facere eaque voluptate maiores consequuntur velit amet? Laudantium tempora sunt autem repellendus iusto ullam sapiente animi nostrum magni possimus earum facere, quibusdam esse nam quisquam
similique nulla atque natus excepturi odio perferendis vel aspernatur. Ipsa veniam eum cupiditate quod quisquam reiciendis necessitatibus labore ipsam sapiente facere totam sint mollitia beatae architecto velit, ex inventore pariatur incidunt repudiandae
accusantium enim culpa! Sit quidem nam quam nulla reprehenderit deleniti, vitae saepe itaque rem aut porro, tenetur nemo ipsam aliquam fugiat illo iste necessitatibus quo explicabo earum obcaecati consequuntur modi minima assumenda? Aperiam est quis
ab ipsum cupiditate voluptatibus laborum, at veniam repellendus reprehenderit mollitia, doloribus quisquam earum quibusdam vero consequuntur veritatis aliquam! Velit veritatis quae explicabo corporis eius possimus beatae voluptatum a, adipisci ea quibusdam
animi. Totam voluptate quas ex. A nihil laborum quos esse vero distinctio impedit quibusdam. Quae voluptate rerum voluptas incidunt quis, vero fuga nulla vel iusto sit fugiat dolor aperiam, recusandae cumque tenetur corporis vitae officiis voluptatem
doloremque suscipit quas cupiditate blanditiis totam! Expedita excepturi eos libero vitae saepe error maiores, perferendis hic quaerat cum iste, neque soluta impedit temporibus assumenda rem, aspernatur dolores ipsam debitis. Exercitationem nihil explicabo
aliquam excepturi quibusdam eligendi eveniet nulla odit. Obcaecati, fugiat beatae iste praesentium ratione explicabo laborum sapiente dignissimos eveniet nam, libero perferendis id ipsa, saepe expedita dolor voluptates ullam error distinctio eos asperiores
maxime! Eveniet quidem, omnis quae neque quis optio consectetur iste excepturi eius doloremque laudantium officiis. Velit labore quo exercitationem atque dolorem, maxime tempore, tenetur aperiam aliquam, nemo aspernatur molestias enim sapiente fuga
sint impedit optio molestiae. Aut explicabo ullam quo consequuntur reiciendis, fugit optio consequatur maiores distinctio. Alias dolores facere ad provident, ratione aliquid asperiores iusto, accusamus eveniet omnis quisquam repellat praesentium! Pariatur
aut, dolor nostrum laudantium labore dolores facilis. Quod optio illo deleniti quisquam ab alias incidunt, non nulla est, vitae culpa animi neque dicta fuga velit cumque aspernatur commodi ea, repellendus sapiente eius quas! Illum sapiente, nisi doloribus,
omnis iste necessitatibus facilis, eveniet exercitationem perferendis libero laboriosam reiciendis. Facilis laudantium velit rem eveniet magnam numquam quas, temporibus porro fugit, adipisci consequatur quisquam quasi dicta perferendis. Exercitationem
commodi quae porro iste quod neque suscipit cumque enim. Autem eveniet quod reprehenderit assumenda vero ipsam excepturi. Magni tempore tempora quia ab iure vero eaque soluta, dolore cum pariatur deserunt saepe perferendis libero minus consequatur quam
rem repudiandae! Ipsum labore, perspiciatis illo voluptatum quas praesentium vero adipisci illum debitis sit repellat assumenda reiciendis nobis porro facilis veniam iste aliquid natus deleniti corporis veritatis quibusdam earum quaerat? Quo dolore
ratione delectus consectetur quia minima expedita repudiandae mollitia aliquam beatae recusandae dolorum, voluptatum accusantium consequatur fugiat optio id? Iste sunt delectus totam? Illo dignissimos sequi ab ullam eveniet, quod quibusdam, repellendus
molestiae odio repellat beatae, dolorem sint nobis consectetur! Ab, officiis. Iure voluptates eius eligendi reiciendis consectetur nemo est earum, sequi eveniet voluptas modi veniam dolores praesentium laudantium neque, quidem, minus ullam eum optio
voluptate repudiandae a quia molestias debitis. Commodi, in sequi. Amet saepe officiis quae itaque praesentium sint libero quod exercitationem eum aspernatur? Sunt incidunt, eum sint qui tempore alias eaque molestiae voluptates? Quam quo, reiciendis
dolore nostrum non placeat eius, rerum deserunt nisi iste accusamus dolorem consequuntur esse deleniti perspiciatis dolorum. Sint optio expedita eligendi iure, maiores quo delectus quod veritatis, eos sit eveniet, ullam rerum corrupti. Fuga excepturi
fugiat, error autem voluptates culpa ducimus atque, illo animi deserunt amet quas quidem a id, ullam architecto perspiciatis. Consequuntur quis veniam soluta sapiente quia. Excepturi consectetur nemo, unde earum nostrum, voluptas veniam fugit, velit
commodi rerum sed? Est cupiditate at ad, rem sit nam corporis officiis quod velit cum quibusdam odit possimus, delectus enim voluptatum molestias iusto in odio aliquid totam sequi suscipit et mollitia dolore. Quis, enim distinctio. Quae corporis blanditiis
quod, soluta nulla deserunt in accusamus ipsam illum earum nihil commodi ea odit molestiae necessitatibus consectetur sapiente, ullam laborum magnam! Reprehenderit modi magnam voluptatum sed quis voluptatibus dicta vel consequuntur laudantium, doloremque
alias quisquam est illum recusandae libero iusto, laborum eligendi, porro aspernatur fugit nisi velit corrupti eos? Obcaecati necessitatibus reiciendis officiis iusto! Saepe et assumenda est optio ad ea magnam nulla doloremque eius voluptates non totam
similique, ullam numquam molestiae. Voluptate assumenda, laborum tempora eos nesciunt odio tenetur deserunt dicta, totam excepturi hic sequi a earum accusamus officiis. Delectus quis veniam aspernatur id rerum expedita deleniti, natus culpa odit suscipit,
nulla consectetur, in consequatur nostrum ullam voluptas sed laborum officiis incidunt? Eius, labore. Doloribus quod dolores facilis quis ea eum minima perspiciatis suscipit in nisi totam esse quia quasi alias dolorum veniam assumenda doloremque velit,
perferendis voluptatibus. Eveniet veritatis nesciunt accusantium dolores fuga! Esse, accusamus quaerat! Totam, nesciunt? Numquam sint cupiditate esse eos perferendis sunt optio iusto eligendi non, minus est expedita? Fuga cupiditate explicabo a, harum
nam ad dignissimos quia iusto qui voluptate optio quae voluptatum esse nesciunt necessitatibus eum molestias porro perspiciatis! Et consectetur pariatur sequi quisquam aliquam aspernatur velit quos.</p>