需要帮助定位翻转卡

Question

我一直在寻找问题的答案，但似乎找不到。

我需要将翻页卡移动到用于文本的白框的右侧。

我应该如何去做？我尝试了相对位置和绝对位置以及固定位置，但是我可能会以错误的方式进行操作。

<script>

  function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches(".dropbtn")) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains("show")) {
        openDropdown.classList.remove("show");
      }
    }
  }
};

</script>
</html>

.flip_card{

 position: absolute;
    top: 50px;
    left: 50px;

}

body {
  font-family: "Times New Roman";
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}



.flip-card-back {
  background-color: #ff0000;
  color: white;
  transform: rotateY(180deg);
}
 .flip-card-back {
  text-shadow: 2px 2px black;
}


  .dropbtn {
  background-color: #d3d3d3;
  color: #000000;
  width: 960px;
  height: 50px;
  font-size: 16px;
  border-left: 6px solid red;
  cursor: pointer;
  text-align: absolute;
  overflow: hidden;
  align-items: absolute;
  position: absolute;
  top: 50px;
}

/* Dropdown button on hover & focus */

.dropbtn:hover,
.dropbtn:focus {
  background-color: #ffffff;
}
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  top: 130px;
  left: 2px;
  background-color: #4b4c58;
  border: 6px black;
  min-width: 160px;
  z-index: 1;
  overflow: hidden;
}

/* Links inside the dropdown */

.dropdown-content a {
  color: #ffffff;
  font-family: verdana;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: #ff0000;
}

.show {
  display: block;
}

.fadeMenu1 {
  -webkit-animation: fadeMenu1 1s;
  /* Safari, Chrome and Opera > 12.1 */
  display: block;
  margin: 10px auto;
}
@keyframes fadeMenu1 {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  20% {
    opacity: 1;
    transform: translateY(-10px);
  }
  40% {
    opacity: 1;
    transform: translateY(10px);
  }
  60% {
    opacity: 1;
    transform: translateY(0px);
  }
}
.fadeMenu2 {
  -webkit-animation: fadeMenu2 1.5s;
  /* Safari, Chrome and Opera > 12.1 */
  display: block;
  margin: 10px auto;
}
@keyframes fadeMenu2 {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  20% {
    opacity: 1;
    transform: translateY(-10px);
  }
  40% {
    opacity: 1;
    transform: translateY(10px);
  }
  60% {
    opacity: 1;
    transform: translateY(0px);
  }
}
.fadeMenu3 {
  -webkit-animation: fadeMenu3 2s;
  /* Safari, Chrome and Opera > 12.1 */
  display: block;
  margin: 10px auto;
}
@keyframes fadeMenu3 {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  20% {
    opacity: 1;
    transform: translateY(-10px);
  }
  40% {
    opacity: 1;
    transform: translateY(10px);
  }
  60% {
    opacity: 1;
    transform: translateY(0px);
  }
}
.fadeMenu4 {
  -webkit-animation: fadeMenu4 2.5s;
  /* Safari, Chrome and Opera > 12.1 */
  display: block;
  margin: 10px auto;
}
@keyframes fadeMenu4 {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  20% {
    opacity: 1;
    transform: translateY(-10px);
  }
  40% {
    opacity: 1;
    transform: translateY(10px);
  }
  60% {
    opacity: 1;
    transform: translateY(0px);
  }
}
.fadeMenu5 {
  -webkit-animation: fadeMenu5 3s;
  /* Safari, Chrome and Opera > 12.1 */
  display: block;
  margin: 10px auto;
}
@keyframes fadeMenu5 {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  20% {
    opacity: 1;
    transform: translateY(-10px);
  }
  40% {
    opacity: 1;
    transform: translateY(10px);
  }
  60% {
    opacity: 1;
    transform: translateY(0px);
  }
}
.fadeMenu6 {
  -webkit-animation: fadeMenu6 3.5s;
  /* Safari, Chrome and Opera > 12.1 */
  display: block;
  margin: 10px auto;
}
@keyframes fadeMenu6 {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  20% {
    opacity: 1;
    transform: translateY(-10px);
  }
  40% {
    opacity: 1;
    transform: translateY(10px);
  }
  60% {
    opacity: 1;
    transform: translateY(0px);
  }
}
.fadeMenu7 {
  -webkit-animation: fadeMenu7 4s;
  /* Safari, Chrome and Opera > 12.1 */
  display: block;
  margin: 10px auto;
}
@keyframes fadeMenu7 {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  20% {
    opacity: 1;
    transform: translateY(-10px);
  }
  40% {
    opacity: 1;
    transform: translateY(10px);
  }
  60% {
    opacity: 1;
    transform: translateY(0px);
  }
}
.fadeMenu8 {
  -webkit-animation: fadeMenu8 4.5s;
  /* Safari, Chrome and Opera > 12.1 */
  display: block;
  margin: 10px auto;
}
@keyframes fadeMenu8 {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  20% {
    opacity: 1;
    transform: translateY(-10px);
  }
  40% {
    opacity: 1;
    transform: translateY(10px);
  }
  60% {
    opacity: 1;
    transform: translateY(0px);
  }
}
.fadeMenu9 {
  -webkit-animation: fadeMenu9 5s;
  /* Safari, Chrome and Opera > 12.1 */
  display: block;
  margin: 10px auto;
}
@keyframes fadeMenu9 {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  20% {
    opacity: 1;
    transform: translateY(-10px);
  }
  40% {
    opacity: 1;
    transform: translateY(10px);
  }
  60% {
    opacity: 1;
    transform: translateY(0px);
  }
}
.fadeSelect{
  -webkit-animation: fadeSelect 5s;
  /* Safari, Chrome and Opera > 12.1 */
  display: block;
  margin: 10px auto;
}
@keyframes fadeSelect {
  0% {
    opacity: 0;
    transform: translateY(500px);
  }
  20% {
    opacity: 1;
    transform: translateY(-10px);
  }
  40% {
    opacity: 1;
    transform: translateY(10px);
  }
  60% {
    opacity: 1;
    transform: translateY(0px);
  }
}

/*blocks fade*/
.fadeBlock1 {
  -webkit-animation: fadeBlock1 1s;
  /* Safari, Chrome and Opera > 12.1 */
  display: block;
  margin: 10px auto;
}
@keyframes fadeBlock1 {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

.fadeBlock2 {
  -webkit-animation: fadeBlock2 1.3s;
  /* Safari, Chrome and Opera > 12.1 */
  display: block;
  margin: 10px auto;
}
@keyframes fadeBlock2 {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

.fadeBlock3 {
  -webkit-animation: fadeBlock3 1.6s;
  /* Safari, Chrome and Opera > 12.1 */
  display: block;
  margin: 10px auto;
}
@keyframes fadeBlock3 {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

.fadeBlock4 {
  -webkit-animation: fadeBlock4 1.9s;
  /* Safari, Chrome and Opera > 12.1 */
  display: block;
  margin: 10px auto;
}
@keyframes fadeBlock4 {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

/* Fade Gallery*/

.fadeGallery{
  -webkit-animation: fadeGallery 3s;
  /* Safari, Chrome and Opera > 12.1 */
  display: block;
  margin: 10px auto;
}
@keyframes fadeGallery {
 0% {
    opacity: 0;
    transform: translateY(100px);
  }
  20% {
    opacity: 1;
    transform: translateY(-10px);
  }
  40% {
    opacity: 1;
    transform: translateY(10px);
  }
  60% {
    opacity: 1;
    transform: translateY(0px);
  }
}


/* Logo CSS Starts */
#logo {
  width: 200px;
  height: 80px;
  margin: 15px auto;
  float:center;
}
/* Logo CSS ENDS*/

/* Gallery Area */
.gallery {
  width: 960px;
  height: 370px;
  margin: 20px auto;
  text-align: center;
  background: #fff;
  -moz-box-shadow: 0 0 8px #666;
  -webkit-box-shadow: 0 0 8px #666;
  box-shadow: 0 0 8px #666;
  border-left: 6px solid red;
}
.gallery img {
  padding: 10px 0;
}
html,
* {
  padding: 0;
  margin: 0;
}

body {
  background: url(http://blog.hdwallsource.com/wp-content/uploads/2014/11/dark-gradient-wallpaper-26038-26723-hd-wallpapers.jpg)
    repeat top center #ada6a0;
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 12px;
}

a {
  color: #000;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

#frame {
  width: 960px;
  margin: 0 auto;
}

/* Welcome Text Box */
.nav1 {
  width: 100%;
  height: 45px;
  background: #fff;
  -moz-box-shadow: 0 0 8px #666;
  -webkit-box-shadow: 0 0 8px #666;
  box-shadow: 0 0 8px #666;
  position: absolute;
  bottom: 0px;
  border-left: 6px solid red;
}
.nav1 ul {
  list-style: none;
}
.nav1 ul li {
  float: left;
  font-size: 16px;
  margin: 13px 22px;
}
.nav1 div {
  float: right;
}
.nav1 p {
  margin: 15px;
  float: left;
}

p {
  font-family: verdana;
  font-size: 18px;
  
}

</style>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Testing</title>
	<link rel="stylesheet" type="text/css" href="styles/style.css" media="screen" />
</head>

<body>
	<div id="frame">

		<div class="dropdown">
			<button onclick="myFunction()" class="dropbtn fadeSelect">Menu</button>
      <div id="myDropdown" class="dropdown-content">
        <a class="fadeMenu1" href="https://Homepage.terminator69851.repl.co">Home</a>
        <a class="fadeMenu2" href="https://CPU.terminator69851.repl.co">CPU</a>
        <a class="fadeMenu3" href="https://MOTHERBOARD.terminator69851.repl.co">Motherboard</a>
        <a class="fadeMenu4" href="https://RAM.terminator69851.repl.co">RAM</a>
        <a class="fadeMenu5" href="https://GPU.terminator69851.repl.co">GPU</a>
        <a class="fadeMenu6" href="https://Storage.terminator69851.repl.co">Storage</a>
        <a class="fadeMenu7" href="https://PSU.terminator69851.repl.co">Power Supply</a>
        <a class="fadeMenu8" href="https://Case.terminator69851.repl.co">Case</a>
        <a class="fadeMenu9" href="https://Tutorial.terminator69851.repl.co">Tutorial</a>

      </div>
    </div>

  </div>
  

</body>
<!-- Logo Area Starts -->
<div id="logo">
  <img src="" alt="" />
</div>
<!-- Navigation Div Ends -->

<div class="gallery fadeGallery">
  

  <br>
  
  <p>
    
    Text Goes Here

  </p>
</div>

<div class="nav1">
  <p>
    <a href="#">Rohan</a>
  </p>
  <p>
    <a href="#">livanessa</a>
  </p>

  <div>
    <ul>
      <li><a href="#">Computer Science</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">Rubric</a></li>
    </ul>
  </div>
</div>

<div class="flip-card">                                        
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src=https://github.com/terminator69851/How-to-build-a-PC/blob/master/pic.jpg?raw=true" height= 300>
    </div>
    <div class="flip-card-back"> 
      <h1>This is a Computer</h1> 
      <h3>It can be used for many jobs like 
        <li> Engineering  </li>
        <li> Architecture </li>
        <li> Music Mixing </li>
        <li> Streaming </li>
     </h3> 
      
      <p>
 This website will describe each part and its uses and show you how to build a computer.

      </p>
    </div>
  </div>
</div>

Answer 1

所以基本上，您通常需要做些什么，这是解决此类问题的通用答案。

将整个方框包装在position: relative;

中

然后，您需要为孩子应用position: absolute。

这将使孩子绝对位于父母的相对位置。

下面我创建了一个简单的示例，该示例也适用于您的问题。

.parent{
  position: relative;

  background-color: orange;
  height: 200px;
  width: 200px;
}

.child{
  position: absolute;
  top: 0;
  right: 0;

  background-color: purple;
  height: 50px;
  width: 50px;
}

<div class="parent">
  Parent
  <div class="child">Child</div>
</div>

然后，您可以将对象放置在像素中，例如在这里top: 0将其放置在顶部，距顶部0 px，right: 0将其放置在右上方。

希望这会有所帮助。

Answer 2

.parent{
  position: relative;

  background-color: orange;
  height: 200px;
  width: 200px;
}

.child{
  position: absolute;
  top: 0;
  right: 0;

  background-color: purple;
  height: 50px;
  width: 50px;
}

<div class="parent">
  Parent
  <div class="child">Child</div>
</div>