如何将我的文字放在div的固定位置

Question

我尝试将文本放在div的右侧和内部，但是当放position:fixed时，它就会消失。我不知道这是什么问题，在滚动时我需要修正此文本。

https://codepen.io/ta_io/pen/aMxeXZ

<div class="container" style="">
  <nav>
    <div class="logo">
      <a href="#">LOGO</a>
    </div>
    <div class="nav-wrapper">
      <ul style="">
        <li><a href="#">WORK</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </div>
  </nav>
</div>

<div class="content-wrapper">
</div>

Answer 1

Updated CodePen 。

改为使用float属性：

ul{
   float: right;
   ..
}

Answer 2

从UL类中移除固定的位置。将包装纸右移。同样，您在UL班级中的职位也无济于事。

 .nav-wrapper {
     float: right;
 }

Answer 3

我创建了一个header元素，并为该元素指定了固定位置，因此该元素内部的所有内容都是固定的。

static void launchScreen(String fileName) {
    fileName = "/screens/" + fileName + ".fxml";
    try {
        Parent root =            
        FXMLLoader.load(MainMenuController.class.getResource(fileName));
        Scene scene = new Scene(root);
        stage.setTitle("Fortress Combat");
        stage.setScene(scene);
        stage.show();
        stage.setOnCloseRequest(t -> {
            Platform.exit();
            System.exit(420);
        });
    } catch (IOException e) {
        e.printStackTrace();
    }
}

并从徽标和菜单中删除了固定位置。

https://codepen.io/anon/pen/eXaOPW

Answer 4

尝试这样的事情

  <nav>
    <div class="logo">
      <a href="#">LOGO</a>
    </div>

    <div class="nav-wrapper">
      <ul>
        <li><a href="#">WORK</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </div>
  </nav>
  
  <div>
  		Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus a veritatis blanditiis nemo id ipsam ipsum officia officiis. Ipsam dicta ad natus corrupti laborum ea tempore unde id est deserunt?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus a veritatis blanditiis nemo id ipsam ipsum officia officiis. Ipsam dicta ad natus corrupti laborum ea tempore unde id est deserunt?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus a veritatis blanditiis nemo id ipsam ipsum officia officiis. Ipsam dicta ad natus corrupti laborum ea tempore unde id est deserunt?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus a veritatis blanditiis nemo id ipsam ipsum officia officiis. Ipsam dicta ad natus corrupti laborum ea tempore unde id est deserunt?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus a veritatis blanditiis nemo id ipsam ipsum officia officiis. Ipsam dicta ad natus corrupti laborum ea tempore unde id est deserunt?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus a veritatis blanditiis nemo id ipsam ipsum officia officiis. Ipsam dicta ad natus corrupti laborum ea tempore unde id est deserunt?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus a veritatis blanditiis nemo id ipsam ipsum officia officiis. Ipsam dicta ad natus corrupti laborum ea tempore unde id est deserunt?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus a veritatis blanditiis nemo id ipsam ipsum officia officiis. Ipsam dicta ad natus corrupti laborum ea tempore unde id est deserunt?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus a veritatis blanditiis nemo id ipsam ipsum officia officiis. Ipsam dicta ad natus corrupti laborum ea tempore unde id est deserunt?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus a veritatis blanditiis nemo id ipsam ipsum officia officiis. Ipsam dicta ad natus corrupti laborum ea tempore unde id est deserunt?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus a veritatis blanditiis nemo id ipsam ipsum officia officiis. Ipsam dicta ad natus corrupti laborum ea tempore unde id est deserunt?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus a veritatis blanditiis nemo id ipsam ipsum officia officiis. Ipsam dicta ad natus corrupti laborum ea tempore unde id est deserunt?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus a veritatis blanditiis nemo id ipsam ipsum officia officiis. Ipsam dicta ad natus corrupti laborum ea tempore unde id est deserunt?		Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus a veritatis blanditiis nemo id ipsam ipsum officia officiis. Ipsam dicta ad natus corrupti laborum ea tempore unde id est deserunt?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus a veritatis blanditiis nemo id ipsam ipsum officia officiis. Ipsam dicta ad natus corrupti laborum ea tempore unde id est deserunt?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus a veritatis blanditiis nemo id ipsam ipsum officia officiis. Ipsam dicta ad natus corrupti laborum ea tempore unde id est deserunt?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus a veritatis blanditiis nemo id ipsam ipsum officia officiis. Ipsam dicta ad natus corrupti laborum ea tempore unde id est deserunt?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus a veritatis blanditiis nemo id ipsam ipsum officia officiis. Ipsam dicta ad natus corrupti laborum ea tempore unde id est deserunt?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus a veritatis blanditiis nemo id ipsam ipsum officia officiis. Ipsam dicta ad natus corrupti laborum ea tempore unde id est deserunt?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus a veritatis blanditiis nemo id ipsam ipsum officia officiis. Ipsam dicta ad natus corrupti laborum ea tempore unde id est deserunt?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus a veritatis blanditiis nemo id ipsam ipsum officia officiis. Ipsam dicta ad natus corrupti laborum ea tempore unde id est deserunt?		Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus a veritatis blanditiis nemo id ipsam ipsum officia officiis. Ipsam dicta ad natus corrupti laborum ea tempore unde id est deserunt?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus a veritatis blanditiis nemo id ipsam ipsum officia officiis. Ipsam dicta ad natus corrupti laborum ea tempore unde id est deserunt?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus a veritatis blanditiis nemo id ipsam ipsum officia officiis. Ipsam dicta ad natus corrupti laborum ea tempore unde id est deserunt?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus a veritatis blanditiis nemo id ipsam ipsum officia officiis. Ipsam dicta ad natus corrupti laborum ea tempore unde id est deserunt?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus a veritatis blanditiis nemo id ipsam ipsum officia officiis. Ipsam dicta ad natus corrupti laborum ea tempore unde id est deserunt?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus a veritatis blanditiis nemo id ipsam ipsum officia officiis. Ipsam dicta ad natus corrupti laborum ea tempore unde id est deserunt?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus a veritatis blanditiis nemo id ipsam ipsum officia officiis. Ipsam dicta ad natus corrupti laborum ea tempore unde id est deserunt?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus a veritatis blanditiis nemo id ipsam ipsum officia officiis. Ipsam dicta ad natus corrupti laborum ea tempore unde id est deserunt?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus a veritatis blanditiis nemo id ipsam ipsum officia officiis. Ipsam dicta ad natus corrupti laborum ea tempore unde id est deserunt?




  </div>

getOptionLabel