html - 制作带有单选按钮的div

Question

我的 div 中的代码包含一堆带有标签的单选按钮，单击这些按钮会显示不同类型的信息。

我唯一的问题是，使用 CSS 时，带标签的单选按钮会滚动，不像上面的类型那样固定。

这是带有 div (#intro) 的 HTML，当顶部为 100px 和单选按钮 (div class="gallery") 时，它会卡住

<div class="sticky">
<div id="intro">
        <i>
        Singing A European Tune is one of the many editorial stories The Marshall Project has covered. While prisons across America are known for its rough punishments and life for its inmates, some prison boards have taken it upon themselves to try some new techniques to improve facilitation and rehabilition for its inhabitats.</i>
        <br>
        <br>
        <b>Written by Maurice Chammah</b>
        </div>
</div>
    <!-- states -->
        <input type="radio" checked="checked" name="raz" id="raz0"/>
        <input type="radio" name="raz" id="raz1"/>
        <input type="radio" name="raz" id="raz2"/>
        <input type="radio" name="raz" id="raz3"/>
        <input type="radio" name="raz" id="raz4"/>
        <input type="radio" name="raz" id="raz5"/>

        <div class="gallery">
            <label for="raz0" title="0">SINGING A EUROPEAN TUNE</label>
            <label for="raz1" title="1">CONNECTICUT</label>
            <label for="raz2" title="2">IDAHO</label>
            <label for="raz3" title="3">PENNSYLVANIA</label>
            <label for="raz4" title="4">RHODE ISLAND</label>
            <label for="raz5" title="5">NORTH DAKOTA</label>
        </div>

        <div id="contentdiv0">
        <h3>Singing A European Tune</h3>
            <p id="content0">In August, when the solar eclipse passed over South Boise Women's Correctional Center in Idaho, the officers held lunch early, handed out protective sunglasses, and invited the women outside to watch the sky. At the Cheshire 
            Correctional Institution in Connecticut, a few prisoners and officers recently played cards together; the warden seemed a little stunned when describing the scene. John Wetzel, who runs the prison system in Pennsylvania, has noticed a shift in tone at annual gatherings of his peers. “We talk more now about the humanity of inmates, and the impact of harsh environments on both staff and inmates,” he said. He doesn’t want to overstate the point; most U.S. prisons are still focused on security, reflecting a broader culture of punishment. (Wetzel himself has been criticized for not doing more to reduce his agency’s use of solitary confinement.) But when he considers these small moments around the country, he cites a surprising influence: Europe.
            Since 2013, officials from at least a dozen states have toured prisons in Norway, Germany, and the Netherlands on official trips organized by the Prison Law Office and the Vera Institute of Justice. (We covered one such trip to Germany in 2015). Last month, Alaska and Oregon joined the list. The idea is to expose forward-thinking prison officials to places that embrace rehabilitation over punishment, coupling intensive counseling and education with an environment that mimics the world these men and women will rejoin at the end of their sentences. Throughout Western Europe, prisoners sleep in individual rooms with private bathrooms. They often wear their own clothes, cook their own food, and receive conjugal visits. They get paid enough in prison jobs so they have ample money to help them get set up when they leave.
            <br>
            <br>
            “We’re not trying to run around the states creating a bunch of mini-Norways,” said Brie Williams, a 
            University of California, San Francisco medical professor who works with the Prison Law Office to organize the trips. But the selling point is that in the U.S., as in Europe, most prisoners will return home. If they are not rehabilitated by then, they may commit more crimes, and Europeans understand this far better than Americans. Williams said, “We tell our participants, ‘Ask your cab drivers, your waiters, what is the point of the prison system?’ Everyone will say, ‘To make better neighbors.’”Even when American officials express sincere admiration for the European approach, they also talk of political and practical constraints. They have far more prisoners to house than their European peers, and little control over the long sentences passed by legislatures. Norway and Germany have managed to insulate their prison officials from political pressures, while in the U.S., governors can replace leaders who get a reputation in the media for creating “country-club prisons.” The Prison Law Office, which continues to hold the trips yearly, increasingly focuses on aspects of prison management that are more immediately adaptable, and asks corrections leaders to bring along legislative and executive branch officials with influence over budgets.
            <br>
            <br>
            Four years after the trips began, both the opportunities and limits of the approach are becoming visible as leaders take small steps across the country. Here are updates from five states.
            </p>
        </div>


        <div id="contentdiv">
        <h3>Connecticut</h3>
            <p id="content">In Germany, prisoners between the ages of 18 and 25 are all housed togetherand given especially intensive therapy and educational programs, since they are traditionally the most likely to commit new crimes after prison. After visiting one such facility, Connecticut prison commissioner Scott Semple asked his staff to come up with a pilot program, which was launched in January 2017. At the Cheshire Correctional Facility, 54 young prisoners are now housed together, and work with staff who have been trained to counsel them and prepare them for release. Connecticut has enlisted older men, serving long sentences, to live in the unit and act as “mentors.” There has been little violence, though the program cannot be truly assessed until some of the men leave prison.

            The Connecticut story also features a lesson about politics. Semple had originally envisioned a bigger program, The Atlantic reported, but budget problems have forced the agency to lay off employees. Connecticut governor Dannel Malloy is famously committed to a political vision called the “Second Chance Society,” but he will not seek reelection and his term ends in January 2019. His successor may not be so committed. Corrections leaders don’t always stick around for long; of the four agency heads who toured German prisons in 2015, only Semple remains in his job.
            </p>
        </div>

        <div id="contentdiv2">
            <h3>Idaho</h3>
            <p id="content2">Idaho officials have talked big — revising their training for officers, hugely reducing solitary confinement, creating elaborate incentive systems for prisoner behavior — but they have started small. They have allowed prisoners and staff to invite their families to meet one another, and in one instance go fishing together. They’ve repainted common cafeterias and dayrooms, and replaced metal and plastic chairs and tables with throw rugs and couches. “This is the first soft thing I’ve had a chance to sit on in five years,” one prisoner told corrections director Henry Atencio when he first visited such a room. “It’s something you and I take for granted,” Atencio said.</p>
        </div>

        <div id="contentdiv3">
        <h3>Pennsylvania</h3>
            <p id="content3">Wetzel returned from visiting prisons in Germany and The Netherlands, in 2013, and set up “transitional housing units,” where prisoners prepare for life after release. This month, he hosted Norwegian prison warden Are Høidal, who addressed roughly a hundred staff on how Norway’s prisons were plagued by violence and drugs 30 years ago, before a system-wide overhaul. Wetzel said many in the back of the room had their arms crossed, and he wants to undertake an experiment, sending a large group of staff to Europe and then instructing them to recreate everything they saw in a single unit in their state, and then measure whether European practices clearly reduce recidivism.</p>
        </div>

        <div id="contentdiv4">
        <h3>Rhode Island</h3>
            <p id="content4">Wetzel returned from visiting prisons in Germany and The Netherlands, in 2013, and set up “transitional housing units,” where prisoners prepare for life after release. This month, he hosted Norwegian prison warden Are Høidal, who addressed roughly a hundred staff on how Norway’s prisons were plagued by violence and drugs 30 years ago, before a system-wide overhaul. Wetzel said many in the back of the room had their arms crossed, and he wants to undertake an experiment, sending a large group of staff to Europe and then instructing them to recreate everything they saw in a single unit in their state, and then measure whether European practices clearly reduce recidivism.</p>
        </div>

        <div id="contentdiv5">
        <h3>North Dakota</h3>
            <p id="content5">While visiting Norway’s prisons in 2015, North Dakota prison's chief Leann Bertsch broke down in tears and told a deputy, “We’re hurting people.” The magazine Mother Jones recounted the moment earlier this year, in a story about how Bertsch has embarked on a massive reform project inspired by Norway. Men approaching their release dates can now apply for private rooms that look more like dormitories than prison cells, and they have their own keys to lock them when they leave for work. In the solitary confinement wings — which are shrinking under new policies — correctional officers are required to have two conversations with each prisoner during every shift.

            The speed of change in North Dakota illustrates how European inspired reforms may come more quickly in states with fewer prisoners. The state holds less than 2,000 prisoners, while Pennsylvania, the largest to actively consider Europe-inspired reforms, holds roughly 50,000. Texas, Florida, and California all hold more than 100,000 and leaders in those states have not taken such steps.
            <br>
            <br>
            At least, that is the case at the higher levels. Correctional officers, on the other hand, have talked glowingly of Europe. “They are light years ahead of us,” Lance Lowry, head of the officer union in Texas, said of Norway’s prisons. “We look at punishment as ‘take away, take away, take away,’ but what are we adding?”</p>
        </div> 

这是CSS

#intro {
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
    margin-left: 50px; 
    margin-top: 80px; 
    margin-bottom: -30px; 
    line-height: 22px;
    width: 75%;
    text-align: left;
}
i {
    font-family: Georgia, serif;
}
div.sticky {
    width: 25%;
    float: left;
    margin: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
    height: 980px;
    background-color: #E1E000;
}

#contentdiv0, #contentdiv, #contentdiv2, #contentdiv3, #contentdiv4, #contentdiv5{
    position: absolute;
    width: 35%;
    margin-left: 600px;
    margin-top: 62px;
}

#content0, #content, #content2, #content3, #content4, #content5{
 /*background-color: white;*/
    visibility: hidden;
    opacity: 0;
}

/*clickable gallery*/
input[name="raz"] {
    display: none;
}

div.gallery {
    position: absolute;
    top: 145%;
    margin-left: 45px;
    padding: 0;
    width: 200px; 
    background: no-repeat 50% 0; 
    background-size: auto 100%;
}
div.gallery label {
    display: inline-block; 
    width: 300px; 
    height: 20px; 
    background: no-repeat 50% 50%; 
    background-size: calc(100% - 5px) calc(100% - 5px); 
    margin: 5px;
    cursor: pointer;
}
.gallery label:hover {
    text-decoration: line-through;
    color: white;
    transition: background 0.3s ease-in;
} 
#raz0:checked ~ #contentdiv0 h3 {
    visibility: visible;
    opacity: 1;
    transition: .5s ease-in;
}

#raz1:checked ~ #contentdiv h3 {
    visibility: visible;
    opacity: 1;
    transition: .5s ease-in;
}
#raz2:checked ~ #contentdiv2 h3 {
    visibility: visible;
    opacity: 1;
    transition: .5s ease-in;
}
#raz3:checked ~ #contentdiv3 h3  {
    visibility: visible;
    opacity: 1;
    transition: .5s ease-in;
}
#raz4:checked ~ #contentdiv4 h3 {
    visibility: visible;
    opacity: 1;
    transition: .5s ease-in;
}
#raz5:checked ~ #contentdiv5 h3 {
    visibility: visible;
    opacity: 1;
    transition: .5s ease-in;
}

#raz0:checked ~ #contentdiv0 p {
    visibility: visible;
    opacity: 1;
    transition: .5s ease-in;
}
#raz1:checked ~ #contentdiv p {
    visibility: visible;
    opacity: 1;
    transition: .5s ease-in;
}
#raz2:checked ~ #contentdiv2 p {
    visibility: visible;
    opacity: 1;
    transition: .5s ease-in;
}
#raz3:checked ~ #contentdiv3 p  {
    visibility: visible;
    opacity: 1;
    transition: .5s ease-in;
}
#raz4:checked ~ #contentdiv4 p {
    visibility: visible;
    opacity: 1;
    transition: .5s ease-in;
}
#raz5:checked ~ #contentdiv5 p {
    visibility: visible;
    opacity: 1;
    transition: .5s ease-in;
}

Answer 1

如果将 .gallery div 移动到 #intro 中，它将继承 position 属性并解决此问题。希望这对您有所帮助!

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  <link href="styles.css" rel='stylesheet' type='text/css' />
  <title></title>
  <style>
    #intro {
      position: -webkit-sticky;
      position: sticky;
      top: 100px;
      margin-left: 50px;
      margin-top: 80px;
      margin-bottom: -30px;
      line-height: 22px;
      width: 75%;
      text-align: left;
    }

    i {
      font-family: Georgia, serif;
    }

    div.sticky {
      width: 25%;
      float: left;
      margin: 0;
      position: -webkit-sticky;
      position: sticky;
      top: 20px;
      height: 980px;
      background-color: #E1E000;
    }

    #contentdiv0,
    #contentdiv,
    #contentdiv2,
    #contentdiv3,
    #contentdiv4,
    #contentdiv5 {
      position: absolute;
      width: 35%;
      margin-left: 600px;
      margin-top: 62px;
    }

    #content0,
    #content,
    #content2,
    #content3,
    #content4,
    #content5 {
      /*background-color: white;*/
      visibility: hidden;
      opacity: 0;
    }

    /*clickable gallery*/

    input[name="raz"] {
      display: none;
    }

    div.gallery {
      position: absolute;
      top: 145%;
      padding: 0;
      width: 200px;
      background: no-repeat 50% 0;
      background-size: auto 100%;
    }

    div.gallery label {
      display: inline-block;
      width: 300px;
      height: 20px;
      background: no-repeat 50% 50%;
      background-size: calc(100% - 5px) calc(100% - 5px);
      margin: 5px;
      cursor: pointer;
    }

    .gallery label:hover {
      text-decoration: underline;
      color: white;
      transition: background 0.3s ease-in;
    }

    #raz0:checked~#contentdiv0 h3 {
      visibility: visible;
      opacity: 1;
      transition: .5s ease-in;
    }

    #raz1:checked~#contentdiv h3 {
      visibility: visible;
      opacity: 1;
      transition: .5s ease-in;
    }

    #raz2:checked~#contentdiv2 h3 {
      visibility: visible;
      opacity: 1;
      transition: .5s ease-in;
    }

    #raz3:checked~#contentdiv3 h3 {
      visibility: visible;
      opacity: 1;
      transition: .5s ease-in;
    }

    #raz4:checked~#contentdiv4 h3 {
      visibility: visible;
      opacity: 1;
      transition: .5s ease-in;
    }

    #raz5:checked~#contentdiv5 h3 {
      visibility: visible;
      opacity: 1;
      transition: .5s ease-in;
    }

    #raz0:checked~#contentdiv0 p {
      visibility: visible;
      opacity: 1;
      transition: .5s ease-in;
    }

    #raz1:checked~#contentdiv p {
      visibility: visible;
      opacity: 1;
      transition: .5s ease-in;
    }

    #raz2:checked~#contentdiv2 p {
      visibility: visible;
      opacity: 1;
      transition: .5s ease-in;
    }

    #raz3:checked~#contentdiv3 p {
      visibility: visible;
      opacity: 1;
      transition: .5s ease-in;
    }

    #raz4:checked~#contentdiv4 p {
      visibility: visible;
      opacity: 1;
      transition: .5s ease-in;
    }

    #raz5:checked~#contentdiv5 p {
      visibility: visible;
      opacity: 1;
      transition: .5s ease-in;
    }
  </style>
</head>

<body>

  <div class="sticky">
    <div id="intro">
      <i>
            Singing A European Tune is one of the many editorial stories The Marshall Project has covered. While prisons across America are known for its rough punishments and life for its inmates, some prison boards have taken it upon themselves to try some new techniques to improve facilitation and rehabilition for its inhabitats.</i>
      <br>
      <br>
      <b>Written by Maurice Chammah</b>

      <div class="gallery">
        <label for="raz0" title="0">SINGING A EUROPEAN TUNE</label>
        <label for="raz1" title="1">CONNECTICUT</label>
        <label for="raz2" title="2">IDAHO</label>
        <label for="raz3" title="3">PENNSYLVANIA</label>
        <label for="raz4" title="4">RHODE ISLAND</label>
        <label for="raz5" title="5">NORTH DAKOTA</label>
      </div>
    </div>


  </div>
  <!-- states -->
  <input type="radio" checked="checked" name="raz" id="raz0" />
  <input type="radio" name="raz" id="raz1" />
  <input type="radio" name="raz" id="raz2" />
  <input type="radio" name="raz" id="raz3" />
  <input type="radio" name="raz" id="raz4" />
  <input type="radio" name="raz" id="raz5" />



  <div id="contentdiv0">
    <h3>Singing A European Tune</h3>
    <p id="content0">In August, when the solar eclipse passed over South Boise Women's Correctional Center in Idaho, the officers held lunch early, handed out protective sunglasses, and invited the women outside to watch the sky. At the Cheshire Correctional Institution
      in Connecticut, a few prisoners and officers recently played cards together; the warden seemed a little stunned when describing the scene. John Wetzel, who runs the prison system in Pennsylvania, has noticed a shift in tone at annual gatherings
      of his peers. “We talk more now about the humanity of inmates, and the impact of harsh environments on both staff and inmates,” he said. He doesn’t want to overstate the point; most U.S. prisons are still focused on security, reflecting a broader
      culture of punishment. (Wetzel himself has been criticized for not doing more to reduce his agency’s use of solitary confinement.) But when he considers these small moments around the country, he cites a surprising influence: Europe. Since 2013,
      officials from at least a dozen states have toured prisons in Norway, Germany, and the Netherlands on official trips organized by the Prison Law Office and the Vera Institute of Justice. (We covered one such trip to Germany in 2015). Last month,
      Alaska and Oregon joined the list. The idea is to expose forward-thinking prison officials to places that embrace rehabilitation over punishment, coupling intensive counseling and education with an environment that mimics the world these men and
      women will rejoin at the end of their sentences. Throughout Western Europe, prisoners sleep in individual rooms with private bathrooms. They often wear their own clothes, cook their own food, and receive conjugal visits. They get paid enough in
      prison jobs so they have ample money to help them get set up when they leave.
      <br>
      <br> “We’re not trying to run around the states creating a bunch of mini-Norways,” said Brie Williams, a University of California, San Francisco medical professor who works with the Prison Law Office to organize the trips. But the selling point
      is that in the U.S., as in Europe, most prisoners will return home. If they are not rehabilitated by then, they may commit more crimes, and Europeans understand this far better than Americans. Williams said, “We tell our participants, ‘Ask your
      cab drivers, your waiters, what is the point of the prison system?’ Everyone will say, ‘To make better neighbors.’”Even when American officials express sincere admiration for the European approach, they also talk of political and practical constraints.
      They have far more prisoners to house than their European peers, and little control over the long sentences passed by legislatures. Norway and Germany have managed to insulate their prison officials from political pressures, while in the U.S., governors
      can replace leaders who get a reputation in the media for creating “country-club prisons.” The Prison Law Office, which continues to hold the trips yearly, increasingly focuses on aspects of prison management that are more immediately adaptable,
      and asks corrections leaders to bring along legislative and executive branch officials with influence over budgets.
      <br>
      <br> Four years after the trips began, both the opportunities and limits of the approach are becoming visible as leaders take small steps across the country. Here are updates from five states.
    </p>
  </div>


  <div id="contentdiv">
    <h3>Connecticut</h3>
    <p id="content">In Germany, prisoners between the ages of 18 and 25 are all housed togetherand given especially intensive therapy and educational programs, since they are traditionally the most likely to commit new crimes after prison. After visiting one such facility,
      Connecticut prison commissioner Scott Semple asked his staff to come up with a pilot program, which was launched in January 2017. At the Cheshire Correctional Facility, 54 young prisoners are now housed together, and work with staff who have been
      trained to counsel them and prepare them for release. Connecticut has enlisted older men, serving long sentences, to live in the unit and act as “mentors.” There has been little violence, though the program cannot be truly assessed until some of
      the men leave prison. The Connecticut story also features a lesson about politics. Semple had originally envisioned a bigger program, The Atlantic reported, but budget problems have forced the agency to lay off employees. Connecticut governor Dannel
      Malloy is famously committed to a political vision called the “Second Chance Society,” but he will not seek reelection and his term ends in January 2019. His successor may not be so committed. Corrections leaders don’t always stick around for long;
      of the four agency heads who toured German prisons in 2015, only Semple remains in his job.
    </p>
  </div>

  <div id="contentdiv2">
    <h3>Idaho</h3>
    <p id="content2">Idaho officials have talked big — revising their training for officers, hugely reducing solitary confinement, creating elaborate incentive systems for prisoner behavior — but they have started small. They have allowed prisoners and staff to invite
      their families to meet one another, and in one instance go fishing together. They’ve repainted common cafeterias and dayrooms, and replaced metal and plastic chairs and tables with throw rugs and couches. “This is the first soft thing I’ve had a
      chance to sit on in five years,” one prisoner told corrections director Henry Atencio when he first visited such a room. “It’s something you and I take for granted,” Atencio said.</p>
  </div>

  <div id="contentdiv3">
    <h3>Pennsylvania</h3>
    <p id="content3">Wetzel returned from visiting prisons in Germany and The Netherlands, in 2013, and set up “transitional housing units,” where prisoners prepare for life after release. This month, he hosted Norwegian prison warden Are Høidal, who addressed roughly
      a hundred staff on how Norway’s prisons were plagued by violence and drugs 30 years ago, before a system-wide overhaul. Wetzel said many in the back of the room had their arms crossed, and he wants to undertake an experiment, sending a large group
      of staff to Europe and then instructing them to recreate everything they saw in a single unit in their state, and then measure whether European practices clearly reduce recidivism.</p>
  </div>

  <div id="contentdiv4">
    <h3>Rhode Island</h3>
    <p id="content4">Wetzel returned from visiting prisons in Germany and The Netherlands, in 2013, and set up “transitional housing units,” where prisoners prepare for life after release. This month, he hosted Norwegian prison warden Are Høidal, who addressed roughly
      a hundred staff on how Norway’s prisons were plagued by violence and drugs 30 years ago, before a system-wide overhaul. Wetzel said many in the back of the room had their arms crossed, and he wants to undertake an experiment, sending a large group
      of staff to Europe and then instructing them to recreate everything they saw in a single unit in their state, and then measure whether European practices clearly reduce recidivism.</p>
  </div>

  <div id="contentdiv5">
    <h3>North Dakota</h3>
    <p id="content5">While visiting Norway’s prisons in 2015, North Dakota prison's chief Leann Bertsch broke down in tears and told a deputy, “We’re hurting people.” The magazine Mother Jones recounted the moment earlier this year, in a story about how Bertsch has embarked
      on a massive reform project inspired by Norway. Men approaching their release dates can now apply for private rooms that look more like dormitories than prison cells, and they have their own keys to lock them when they leave for work. In the solitary
      confinement wings — which are shrinking under new policies — correctional officers are required to have two conversations with each prisoner during every shift. The speed of change in North Dakota illustrates how European inspired reforms may come
      more quickly in states with fewer prisoners. The state holds less than 2,000 prisoners, while Pennsylvania, the largest to actively consider Europe-inspired reforms, holds roughly 50,000. Texas, Florida, and California all hold more than 100,000
      and leaders in those states have not taken such steps.
      <br>
      <br> At least, that is the case at the higher levels. Correctional officers, on the other hand, have talked glowingly of Europe. “They are light years ahead of us,” Lance Lowry, head of the officer union in Texas, said of Norway’s prisons. “We look
      at punishment as ‘take away, take away, take away,’ but what are we adding?”</p>
  </div>

  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <script></script>
</body>

</html>