html – CSS定位绝对(4颗钻石靠近在一起)

概述你好Stackoverflow用户！ 我再次需要你的帮助. 我试图将4颗钻石放在一个页面的中心,作为登陆页面上的导航. 4颗钻石应该让它们成为自己的钻石,我真的想不出怎么做. 我已经尝试过绝对的位置,但随后它的反应灵敏. 我在这个网站上有自举,所以也许有一个列的解决方案？我试过一切请帮忙. .diamond-top { position: absolute; top: 25%; lef 你好Stackoverflow用户！

我再次需要你的帮助.

我试图将4颗钻石放在一个页面的中心,作为登陆页面上的导航. 4颗钻石应该让它们成为自己的钻石,我真的想不出怎么做.

我已经尝试过绝对的位置,但随后它的反应灵敏.

我在这个网站上有自举,所以也许有一个列的解决方案？我试过一切请帮忙.

.diamond-top {  position: absolute;  top: 25%;  left: 39%;}.diamond-left {  position: absolute;  left: 30%;  top: 38%;}.diamond-right {  position: absolute;  left: 48%;  top: 38%;}.diamond-bottom {  position: absolute;  top: 51%;  left: 39%;}.diamond-container {  wIDth: 212px;  height: 212px;  padding: 30px;}.diamond-container:hover .tile-link {  -webkit-animation: rotateYaxis 5s linear infinite;}.tile-link {  Font-size: 20px;  text-transform: uppercase;  text-align: center;  wIDth: 150px;  height: 150px;  display: block;  position: relative;  line-height: 150px;  -webkit-Transition: 1s ease-in-out;  -moz-Transition: 1s ease-in-out;  -o-Transition: 1s ease-in-out;  Transition: 1s ease-in-out;  transform-origin: center;}.tile-link:hover {  color: #000;  text-decoration: none;}.tile-link:hover:before {  background: yellow;}.tile-link:before {  content: '';  display: block;  wIDth: 150px;  height: 150px;  background: white;  Box-shadow: inset 0 0 0 5px yellow;  transform: rotate(-45deg);  position: absolute;  top: 0;  left: 0;  z-index: -1;  Transition: 1s ease-in-out;}@-webkit-keyframes rotateYaxis {  0% {    -webkit-transform: rotate3d(0,1,0deg);  }  100% {    -webkit-transform: rotate3d(0,720deg);  }}

<div >  <div >    <a href="#" >link 1</a>  </div></div><div >  <div >    <a href="#" >link 2</a>  </div></div><div >  <div >    <a href="#" >link 3</a>  </div></div><div >  <div >    <a href="#" >link 4</a>  </div></div>

解决方法 请与相对位置的父级div进行广告.类似下面的代码,并设置与此div相关的钻石的位置.

.wrap{  position:relative;  wIDth:300px;  height:300px;}<div >    ...</div>

我的解决方案在这里,但是我使用inspect元素添加了值,您可以使用更具体的内容进行更新

.wrap{  position:relative;  wIDth:300px;  height:300px;}.diamond-top {  position: absolute;  top: 25%;  left: 39%;}.diamond-left {position: absolute;left: 13px;top: 60%;}.diamond-right {position: absolute;left: 75%;top: 60%;}.diamond-bottom {position: absolute;top: 95%;left: 39%;}.diamond-container {  wIDth: 212px;  height: 212px;  padding: 30px;}.diamond-container:hover .tile-link {  -webkit-animation: rotateYaxis 5s linear infinite;}.tile-link {  Font-size: 20px;  text-transform: uppercase;  text-align: center;  wIDth: 150px;  height: 150px;  display: block;  position: relative;  line-height: 150px;  -webkit-Transition: 1s ease-in-out;  -moz-Transition: 1s ease-in-out;  -o-Transition: 1s ease-in-out;  Transition: 1s ease-in-out;  transform-origin: center;}.tile-link:hover {  color: #000;  text-decoration: none;}.tile-link:hover:before {  background: yellow;}.tile-link:before {  content: '';  display: block;  wIDth: 150px;  height: 150px;  background: white;  Box-shadow: inset 0 0 0 5px yellow;  transform: rotate(-45deg);  position: absolute;  top: 0;  left: 0;  z-index: -1;  Transition: 1s ease-in-out;}@-webkit-keyframes rotateYaxis {  0% {-webkit-transform: rotate3d(0,0deg);  }  100% {-webkit-transform: rotate3d(0,720deg);  }}

<div ><div >  <div >    <a href="#" >link 1</a>  </div></div><div >  <div >    <a href="#" >link 2</a>  </div></div><div >  <div >    <a href="#" >link 3</a>  </div></div><div >  <div >    <a href="#" >link 4</a>  </div></div></div>

总结

以上是内存溢出为你收集整理的html – CSS定位绝对(4颗钻石靠近在一起)全部内容，希望文章能够帮你解决html – CSS定位绝对(4颗钻石靠近在一起)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。